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 に答える