我在循环中堆叠了一系列动画坐标。我希望在一段时间内运行所有坐标,当它完成所有时,它必须从顶部开始并再次运行它们。
循环有效,但它不会从第一个坐标('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);
答案 0 :(得分:1)
似乎存在数学错误。如果您希望上一个动画将元素移动到起始位置,请将其更改为:
.animate({
'top': '-=200',
'left': '-=300'
}
但是如果你希望它在当前上一个动画之后开始移动,那么在之后添加以下动画:
.animate({
'top': '-=250'
}