jQuery 抖动特效函数封装

<style>
	ul{ margin-top: 100px; }
	li {
		float: left;
		margin-left: 20px;
		position: absolute;
		top: 0;
		margin-top: 100px;
	}
</style>

<ul>
	<li>1111</li>
	<li>2222</li>
	<li>3333</li>
	<li>4444</li>
</ul>

<script>
	$('li').each(function(index){
		$this = $(this).index();
		$('li').eq( $this ).css('left', $this + '20px' );
	})
	$('li').hover(function(){
		shake( this, 'top', 20, function(){
			alert('回调已完成')
		} )
	})

	//抖动运动框架
	function shake(obj, attr, speed, endFn){
		if(obj.onoff) return;	//当前的onoff=false
		obj.onoff = true;
		var pos = parseInt( $(obj).css(attr) );
		var arr = []; //10,-10,8,-8,6,-6......
		var timer = null;
		var num = 0;

		for(var i = speed; i > 0; i -= 2){
			arr.push(i,-i);
		}
		arr.push(0); //最后加上0

		obj.timer = setInterval(function(){
			$(obj).css(attr, arr[num]);
			num++;
			if(num === arr.length){
				clearInterval(obj.timer);
				endFn && endFn();//判断回调函数
				obj.onoff = false;
			}
		},50)
	}
</script>

这边穿梭进入演示空间