0

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

循环有效，但它在通过循环时不会从第一个坐标 ('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);

演示：http: //jsfiddle.net/simomultimedia/NXSVk/1/

4

1 回答 1

1

似乎有一个数学错误。如果您希望最后一个动画将元素移动到起始位置，请将其更改为：

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

但是，如果您希望它在您当前的最后一个动画之后开始移动，那么在此之后添加以下动画：

.animate({
    'top': '-=250'
}
于 2013-02-11T08:16:55.527 回答