jquery 3步动画队列计时答案

【问题标题】：jquery 3 step animation queue timingjquery 3步动画队列计时
【发布时间】：2013-10-11 13:01:36
【问题描述】：

我想要一个动画，其中元素在向右移动（5000 毫秒）时淡入（1000 毫秒），最后它应该再次淡出（在 4000 毫秒，持续时间 1000 毫秒），而元素仍在移动到对。

我的前两部分工作正常，但碰巧需要帮助设置最后一部分的时间设置（不透明度：0）。

这是我的代码：

$(document).ready(function(){
    var truck = $('.truck');
    truck.css("opacity", "0");
    truck.animate({
        opacity: 1
    }, {
        queue: false,
        duration: 1000
    }).animate({
        right: 15
    }, 5000).animate({
        opacity: 0
    }, 1000);

});

谢谢。

【问题讨论】：

您希望它需要 5s 还是 4s 才能移动？你在你的问题中都说。另外，实际上有什么问题，因为看起来不错。
我希望整个动画花费 5s，淡入应该在动画的第一秒内花费 1s，淡出应该在 5s 动画的最后一秒内花费 1s。你知道我的意思吗？
所以移动需要 5 秒。

标签： jquery jquery-animate queue timing

【解决方案1】：

试试这个...

var truck = $('.truck');
truck.css("opacity", "0");
truck
    .animate({
        right: 15
    }, {
        queue: false,
        duration: 5000
    })
    .animate({
        opacity: 1
    }, 1000)
    .delay(3000)
    .animate({
        opacity: 0
    }, 1000);

这是一个有效的 jsfiddle...

http://jsfiddle.net/YTt9W/

【讨论】：

这正是我正在寻找的。直到现在我才知道 delay() .. :) 谢谢！
没问题 - 很高兴为您提供帮助 :)