如何優化此功能以更平滑地進行動畫製作

我已經編寫了此功能來爲卡片樣式佈局創建「顯示更多」功能。我最初編寫它的時候都是在一個點擊函數中，但是隨後範圍發生了變化，我需要將這些命令移動到它們自己的函數中，現在動畫非常直觀，可以更多地忽略。我有一種感覺，它在動畫和引起衝突時與變量更新有關，但我不確定如何繞過該變量，或者在採用一個高度後將該變量設置爲常量。如何優化此功能以更平滑地進行動畫製作

 //This function removes the reveal more trigger and slides "new-deals" down to auto height 
function revealMore() { 
    var containerHt = $("#new-deals").children().height; //set animation height for "reveal more" function 

    //Reveal More function which handles animating container height to that of contained elements and removes the reveal more trigger element 
    if (($("#new-deals").height) >= containerHt) { 
     $("#new-deals").animate({height: containerHt}, 400, function() { 
      $("#new-deals").css({height: 'auto'}); 
     }); 
     $("#new-deals").siblings('.reveal-more').remove(); 
    }  
} 
$(".reveal-more a").click(function() { 
    revealMore(); 
    return false; 
});

來源

2013-10-01 Ian

您可以從創建http://jsfiddle.net開始重現您的問題 – Itay

獲得真正流暢動畫的唯一方法是使用CSS'translate3d'屬性，因爲它是硬件加速的。 – Mathletics

有許多事情：

保存$("#new-deals")中的變量。
使用CSS動畫，而不是jQuery的animate
使用tranzlateZ(0)黑客（如果你不使用大量的VRAM的話）。

退房html5rocks爲啓示。

來源

2013-10-01 21:40:19 Wyatt

如何優化此功能以更平滑地進行動畫製作

回答

相關問題