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。

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

1 个答案: