Question

以下代码片段用于平滑动画：

    $('button').animate({
        'margin-top': 123,
        'opacity': 1
    }, 500);

以某种方式可以将它拆分为两个命令而不会产生排队两个动画的效果吗？

    jQelems.$divSlideButtonLeft.animate({
        'margin-top': 123,
    }, 500);

    jQelems.$divSlideButtonLeft.animate({
        'opacity': 1
    }, 500);

目的是能够为不同功能中的一个对象分离动画。

Answer 1

如果我理解您的问题，您可以使用animate()的{{3}}并在false选项中传递queue：

jQelems.$divSlideButtonLeft.animate({
    "margin-top": 123
}, {
    duration: 500,
    queue: false
});

jQelems.$divSlideButtonLeft.animate({
    opacity: 1
}, {
    duration: 500,
    queue: false
});

文档说：

queue：一个布尔值，指示是否将动画放入效果队列。如果false，动画将立即开始。

Answer 2

你可以试试在第一部分动画的回调函数中调用不透明度。

$('button').animate({'margin-top': 123,}, 500, function (){
$('button').animate({  'opacity': 1}, 500)
});

两个动画都会一个接一个地发生。

jQuery animate：将一个动画拆分为两部分

2 个答案: