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

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

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