jQuery animate：将一个动画分成两部分答案

【问题标题】：jQuery animate: Split one animation in two partsjQuery animate：将一个动画分成两部分
【发布时间】：2011-12-23 12:02:04
【问题描述】：

以下代码 sn-p 在平滑动画上执行：

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

是否有可能以某种方式将其拆分为两个命令而不会产生对两个动画进行排队的效果？

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

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

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

【问题讨论】：

标签： jquery split jquery-animate

【解决方案1】：

如果我正确理解您的问题，您可以使用animate() 的the second form 并在queue 选项中传递false：

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

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

文档说：

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

【讨论】：

你是我的朋友。这个参数我之前确实试过了，但是没用，可能是我的语法错误

【解决方案2】：

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

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

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

【讨论】：

我想完全分离两个动画调用，它们不能相互依赖。哈米迪给出了正确答案。