jQuery animate-不透明度比高度慢

jQuery animate - opacity slower than height

本文关键字：高度 不透明度 animate- jQuery      更新时间：2023-09-26

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

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

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

整个过程必须使用click上导致动画的按钮。它一定是一个拨动开关。

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

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

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

编辑：

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

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。

相关文章：