如何優化jquery動畫代碼

嗨，我正在使用jquery動畫進行放大&。問題在於它太慢，需要太多時間。動畫功能將放大大約100個div。有人可以告訴我應該做些什麼來使其優化。這裏是下面的代碼如何優化jquery動畫代碼

 //Zoom In by clicking the plus button 
     $("div#explanation .plus").click(function(){ 
     jsPlumb.repaintEverything(); 
/*    var strongFont = parseFloat($("div.window strong").css('font-size')); 
      var newStrongFont = strongFont + 2; 
      //alert("the new font is"+strongFont); 
*/ 
      $("div#demo1").animate({'height':'+=20', 'width':'+=20'}); 
      $("div.window ").animate({ 
        'height':'+=20px', 'width':'+=20px' 
       },0,function(){ 
        jsPlumb.repaintEverything(); 
      }); 

    /*    $("div.window strong").animate({ 
        fontSize:newStrongFont 
      },0,function(){ 
       jsPlumb.repaintEverything(); 

      }); 
        */    
     });

我有類似的縮小。請指導我。謝謝！

來源

2012-08-29 unix_user

'repaintEverything（）'的代碼在哪裏？可能需要。 – sQVe

100的divs在同一時間？這將是一場重繪的噩夢。 – epascarello

jsPlumb.repaintEverything（）是由jsPlumb提供的庫函數。 –

完成動畫的時間可以指定爲.animate()的第二個參數。您尚未指定，因此默認值爲400毫秒。你可以將它設置爲任何你想要的。動畫將會在您設定的時間內完成，但如果計算機在這段時間內做了太多工作以向您顯示流暢的動畫，您將會得到一個動畫。

使動畫更少跳動的唯一方法是優化動畫或動畫效果。在同一時間製作100個div的動畫可能比任何東西都重要，但非常非常快速的電腦可以順利進行。

你可能會想重新考慮你在做什麼動畫。在這種情況下，一個可能的解決方法是在內容真的非常複雜並且具有良好性能的情況下進行動畫製作時爲輪廓製作動畫而不是整個內容。

如果您需要進一步的幫助，您將不得不向我們展示更多的問題。我們需要看到你的HTML，所以我們可以看到你真的想要動畫，我們可能需要看看功能，看看它在做什麼。

來源

2012-08-29 17:57:34 jfriend00

謝謝你的幫助。你能告訴我如何僅動畫輪廓？以及repaintEverything（）方法是jsPlumb庫附帶的內置定義函數。所有100個div實際上是相互連接的矩形窗口。還有一個問題：jsPlumb.repaintEverything（）方法在每個動畫調用之後還是在最後的動畫調用之後都會調用？當所有的div都改變了它們的高度和寬度時，我需要在最後調用這個方法。 –

首先，你必須認識到你幾乎肯定不會獲得好幾百個元素的良好表現。瀏覽器處理太多了。我會嘗試爲單個容器元素設置動畫效果，以達到您要做的任何效果。

也就是說，你可能想看看animate-enhanced plugin。在支持CSS動畫的瀏覽器中，該插件會自動將.animate(...)調用轉換爲CSS動畫，這些動畫通常是硬件加速的。這比在設定的時間間隔內更改元素屬性的常用方法的性能要好得多。

如果插件沒有幫助，您也可以嘗試使用CSS animation directly。我不知道你是否真的是在努力動畫框的大小，或者如果你想製作動畫的實際變焦（在該框和它的所有內容變得越來越大），但here's an example that animates the latter：

div { 
    width:200px; 
    height:200px; 
    background:red; 
    color:white; 
    margin:20px 50px; 
    padding:5px; 

    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
} 

div:hover { 
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -webkit-animation-name: popin; 
    -moz-animation-name: popin; 
    -webkit-animation-duration: 350ms; 
    -moz-animation-duration: 350ms;  
} 
@-webkit-keyframes popin { 
    from { 
     -webkit-transform: scale(1); 
    } 
    to { 
     -webkit-transform: scale(1.4); 
    } 
} 
@-moz-keyframes popin { 
    from { 
     -moz-transform: scale(1); 
    } 
    to { 
     -moz-transform: scale(1.4); 
    } 
}

來源

2012-08-29 18:13:06 josh3736

如果您不太在意舊版瀏覽器，那麼您可能可以使用css轉換屬性。它們通常工作得非常快，使您可以有效地放大文檔的複雜部分。這裏的a contrived example，它使用jQuery來放大點擊的東西。動畫會變得更加複雜：我不相信jQuery的動畫與變形有關，但理論上，您可以使用超時在小範圍內重複調整比例。

來源

2012-08-29 18:16:28 Bubbles

如何優化jquery動畫代碼

回答

相關問題