jQuery动画 - 不透明度比高度慢

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.