javascript - jQuery animate - 不透明度比高度慢

Question

想知道是否有可能使 jQuery 动画属性比另一个慢 - 这就是我现在所拥有的：

    $(".thebox").animate({
        height: "toggle",
        opacity: "toggle"
    },250);

当.thebox淡入并同时向下滑动时，我想让动画的不透明度部分变慢，同时使高度部分变快。

整个事情必须与一个按钮一起工作，该按钮click会导致动画。它必须是一个拨动开关。

感谢任何能够回答这个问题的人！

Answer 1

将动画堆叠在一起，并禁用默认的动画队列。

$(".thebox")
.animate({height: "toggle"}, {duration: 250, queue:false})
.animate({opacity: "toggle"}, {duration: 500, queue:false});  // Runs twice as slow.

编辑：

由于使用切换触发了两次事件，我们需要一种不同的方法来检测是隐藏还是显示框。一个简单的解决方案是这样的辅助类：

var theBox = $('.thebox');
if (theBox.hasClass('active')) {
    // It is active, then fade it out
    thebox
    .removeClass('active')
    .animate({height: 0}, {duration: 250, queue:false})
    .animate({opacity: 0}, {duration: 500, queue:false});

} else {
    // It is not active, show it
    thebox
    .addClass('active')
    .animate({height: 'auto'}, {duration: 250, queue:false})
    .animate({opacity: 1}, {duration: 500, queue:false});
}

值得指出的是：动画可以使用slideUp、slideDown、fadeIn 和fadeOut 而不是animate() 来完成。另请注意，上述假设只有一个元素与 class theBox。