用了jQuery的动画以后确实感觉少了好多代码。。。然而突发奇想怎么实现动画循环呢?
<script>
var direction='right';
(function() {
var css = {
'left': '10%'
};
if(direction === 'right') {
direction = 'left';
<span style="white-space:pre"> </span>css.left = '90%';
} else {
direction = 'right';
}
$('.arrow').animate(css, arguments.callee);//返回正在被执行的函数
})();
</script>
传统方案,setinterval函数加animate完全不用动脑。。。只需要setinterval函数周期执行animate函数即可,两个函数时间参数要一致
<script>
var css = {left:'500px'};
setInterval(function(){
$('.arrow').animate(css,300,rowBack);
},300);
function rowBack(){
if(css.left==='50px')
css.left='500px';
else if(css.left==='500px')
css.left='50px';
}
</script>
纯jQuery解决方案,animate的回调函数再次调用自身,类似递归。。。额貌似就是递归。。。个人感觉这种方法最好,暂时没发现效能问题。。。
<script>
var css = {left:'500px'};
$('.arrow').animate(css,300,rowBack);
function rowBack(){
if(css.left==='50px')
css.left='500px';
else if(css.left==='500px')
css.left='50px';
$('.arrow').animate(css,300,rowBack);
}
</script>
网友评论