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>

这边穿梭进入演示空间

巴特西

jQuery 抖动特效函数封装

最新文章

热门文章