循环动画
问题描述:
<div class="wrapper">
<div class="img">image on background</div>
</div>
.wrapper { position: relative; }
.img { position: absolute; left: 0; top: 0; background: url(image.png); }
.img
块必须循环动画,它应该从左边的点.wrapper
行进到右边,然后返回。循环动画
应该有2秒暂停,然后它才会返回。
我该怎么做?
答
如果你只是想图像向右移动,并在屏幕的左边,您可以使用animate
这样的:
$(function(){
var $image = $('div.img'),
$wrapper = $image.parent(),
delay = 1000,
duration = 4000,
moveRight = function(){
$image.delay(delay).animate({
left: $wrapper.width() - $image.width()
}, {
duration: duration,
complete: moveLeft
});
},
moveLeft = function(){
$image.delay(delay).animate({
left: 0
}, {
duration: duration,
complete: moveRight
});
};
moveRight();
});
这个解决方案是行不通的。 – James 2010-10-16 14:05:50
@Happy更多详情?这个对我有用。它出什么问题了?你使用的是什么浏览器? – lonesomeday 2010-10-16 14:10:56
你能在小提琴上演示这个例子吗? – James 2010-10-16 14:13:27