<body><!--DEMO start--><input type="button" value="停止动画" /><div id="demo"><span class="one">01</span><span class="two">02</span><span class="three">03</span><span class="four">04</span><span class="five">05</span><span class="six">06</span><span class="seven">07</span></div><!--DEMO end--><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script> $(function(){ var _slideFun=[ //把要执行的动画依次放入一个数组 function(){$('.one').delay(500).animate({top:'+=290px'},500,_takeOne);}, function(){$('.two').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.three').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.four').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.five').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.six').delay(300).animate({top:'+=290px'},500,_takeOne);}, function(){$('.seven').delay(300).animate({top:'+=290px'},500,function(){ alert('按序落体运动结束! Yeah!'); });} ]; //将函数数组放入slideList动画队列 $('#demo').queue('slideList',_slideFun); var _takeOne=function(){ //取出第一个函数,并执行它 $('#demo').dequeue('slideList'); }; //初始执行第一个函数 _takeOne(); $(':button').click(function(){ $(this).val('刷新重试').attr('disabled',true).css('color','#ccc'); //停止也可用载入空数组实现$('#demo').queue('slideList',[]); $('#demo').clearQueue('slideList'); }); }); </script></body></html>
相关文章：