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() 来完成。另请注意，上面假设只有一个元素具有 theBox 类。