jquery - 如何停止两个动画之间的延迟？

Question

这是我的演示:http://jsfiddle.net/HgMB4/72/我的问题是，每当动画完成并移动到新动画时，它就会停止，然后再执行下一个动画。无论如何，我可以让动画之间的暂停消失吗？我想让过渡流畅，所以它看起来有点像星星在天空中漂浮。请帮忙!

Javascript-

 var main = function () {
    var h = $(window).height();
    var w = $(window).width();
    $('#intro .box').each(function () {
        var originalOffset = $(this).position(),
            $this = $(this),
            tLeft = 0,
            tTop = 0,
            tLeft = w - Math.floor(Math.random() * 900),
            tTop = h - Math.floor(Math.random() * 900);

    $(this).animate({
        "left": tLeft,
            "top": tTop
    }, {
        duration: 5000,
        easing: 'linear'
    })
    $('#intro .box').each(function () {
        var originalOffset = $(this).position(),
            $this = $(this),
            tLeft = 0,
            tTop = 0,
            tLeft = w - Math.floor(Math.random() * 900),
            tTop = h - Math.floor(Math.random() * 900);

        $(this).animate({
            "left": tLeft,
                "top": tTop
        }, {
            duration: 5000,
            easing: 'linear'
        })
    });
});
};
$(document).ready(main);
main();

Answer 1

我会使用类似 crSpline 的插件然后:

$(document).ready(function () {

    // set number of animation sequences and duration range:
    var sequencesNumber = 10,
        minDuration     = 5000,
        maxDuration     = 8000;

    var h = $('#intro').height();
    var w = $('#intro').width();

    // loop through the boxes
    $('#intro .box').each(function () {
        var points = [];
        // create random X,Y destination points for a box:
        for(var i=0; i<sequencesNumber; i++){
            points.push([w-Math.floor(Math.random() * 300), h-Math.floor(Math.random() * 300)]);
        }
        // animate box with random points:
        $(this).animate({
            crSpline: $.crSpline.buildSequence(points)
        // calculate random transistion time for a box:
        },(Math.floor(Math.random() * (maxDuration - minDuration + 1)) + minDuration));
    });

});

DEMO