Jquery循环间隔

时间:2013-02-11 07:15:02

标签: jquery jquery-animate

我在循环中堆叠了一系列动画坐标。我希望在一段时间内运行所有坐标,当它完成所有时,它必须从顶部开始并再次运行它们。

循环有效,但它不会从第一个坐标('top':'+=50''left':'+=300')开始循环。

var port = $('span.view-port'),
    yoyoDuration = 100,
    run = setInterval( function (){
            port.animate({
            'top': '+=50',
            'left': '+=300'
            }, {duration: 1500}) /* -- first co-ordinates -- */
            .animate({
            'top': '+=80',
            'left': '-=300'
            }, {duration: 1500})
            .animate({
            'left': '+=300',
            }, {duration: 2500})
            .animate({
            'top': '-=80',
            'left': '-=300'
            }, {duration: 2500})
            .animate({
            'top': '+=150',
            'left': '+=300'
            }, {duration: 2500})
            .animate({
            'top': '+=50',
            'left': '-=300'
            }, {duration: 2500}) /* -- last co-ordinates -- */
    }, 500);

    setTimeout(function () {
    }, yoyoDuration);

DEMO:http://jsfiddle.net/simomultimedia/NXSVk/1/

1 个答案:

答案 0 :(得分:1)

似乎存在数学错误。如果您希望上一个动画将元素移动到起始位置,请将其更改为:

.animate({
    'top': '-=200',
    'left': '-=300'
}

但是如果你希望它在当前上一个动画之后开始移动,那么在之后添加以下动画:

.animate({
    'top': '-=250'
}