javascript - 如何优化此功能以更流畅地制作动画

Question

我编写了这个函数来为卡片样式布局创建“显示更多”功能。我最初把它写在一个 click 函数中，但后来范围发生了变化，我需要将命令移动到它们自己的函数中，现在动画非常卡顿，无法忽略。我有一种感觉，它与动画时的变量更新有关并导致冲突，但我不确定如何绕过它或在取一个高度后将变量设置为常数。

        //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;   
});

Answer 1

有很多事情：

• 将你的保存$("#new-deals")在一个变量中。
• 使用 CSS 动画而不是 jquery 的animate
• 使用tranzlateZ(0)hack（如果您还没有使用大量 VRAM）。

查看html5rocks以获得启发。