jQuery实现动画循环的三种解决方案

来源：互联网发布：java全角转半角编辑：程序博客网时间：2024/06/05 10:52

用了jQuery的动画以后确实感觉少了好多代码。。。然而突发奇想怎么实现动画循环呢？

百度了一下，看到知乎一位大神的代码 https://www.zhihu.com/question/27598169

<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>

希望能帮助到大家，如果有更好的方案也欢迎交流。。。

1 0