1
我只是在玩jQuery animate()。我试图做出各种各样的无限滚动背景(fiddle here)。但是对于我的生活,我无法想象一个平稳过渡。代码张贴在这里 -jQuery动画 - 无限动作
HTML
<div class='bg r hide'></div>
<div class='bg g hide'></div>
<div class='bg y hide'></div>
<div class='bg b hide'></div>
的JavaScript
var backgroundTimeout = 1700;
function animateMotion(){
$('.bg').each(function(i, item) {
var self = $(this);
setTimeout(function() {
self.css('opacity', '0.5').removeClass('hide')
.animate({opacity: 1, marginLeft: '+=6'}, backgroundTimeout/3)
.animate({
marginLeft: '+=30',
opacity: 0,
queue: false,
}, backgroundTimeout + 400, 'linear', function() {
self.css('marginLeft', 0);
self.css('opacity', 1);
self.addClass('hide');
})
if (self.index() === $('.bg').length - 1) {
setTimeout(animateMotion, backgroundTimeout);
}
}, backgroundTimeout * i + 1)
});
}
什么我要为 - 1格移出 - 变淡什么 - 中途淡出 - 下一个DIV淡入并再次开始循环。任何想法,我要去错了吗?
这正是我一直在寻找。很简约。谢谢 – 2012-07-31 10:57:42