Question

我已经编写了这个函数来为卡片样式布局创建“显示更多”功能。我最初写的都是在一个点击功能中，但随后范围发生变化，我需要将命令移动到他们自己的功能中，现在动画非常难以理解。我有一种感觉，它与变量更新有关，同时动画和引起冲突，但我不知道如何绕过它或在取一个高度后将变量设置为常量。

        //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＆＃39; animate
使用tranzlateZ(0)黑客（如果您还没有使用过很多VRAM）。

查看html5rocks了解启示。

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

1 个答案: