jquery---stop()

1.测试代码

<!doctype html>
<html>
	<head lang='en'>
		<meta charset='utf-8'></meta>
		<style>
		#animater{
		                width: 150px;
		                background:;
		                border: 1px solid black;
		                /*为了移动,需设置此属性*/
		                position: relative;
		            }
		</style>		
	</head>
	<body>
		<div id="animater">
		            stop()方法测试
		        </div>

		        <div id="button">
		            <input type="button" id="button1" value="stop()"/>
		            <input type="button" id="button2" value="stop(true)"/>
		            <input type="button" id="button3" value="stop(false,true)"/>
		            <input type="button" id="button4" value="stop(true,true)"/>
		            
		</div>		
		<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
		<script>
			//            为了看效果,随意写的动画
		                $('#animater').animate({
		                    'right':-800
		                }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal');



		        
		                //           点击不同的button执行不同的操作
		        
		                $('#button1').click(function(){
		                    //默认参数是false,不管写一个false还是两个false还是没写false效果一样
		                    $('#animater').stop();
		                });
		                $('#button2').click(function(){
		                    //第二个参数默认false
		                    $('#animater').stop(true);
		                });
		                $('#button3').click(function(){
		                    $('#animater').stop(false,true);
		                });
		                $('#button4').click(function(){
		                    $('#animater').stop(true,true);
		                });
		</script>
	</body>
</html>

2.截图:试点击这四个按钮测试,stop()在不同参数下的性能:

  

 

3.结果:

stop():的默认值是stop(false,false),第一个animate停止,接下来的其他animate都依次执行;

stop(true):第一个animate停止,接下来的其他animate都停止;

stop(false,true):第一个animate跳到最终结果,接下来的animate继续依次执行,最后停止在第一个animate起跳之前的状态;

stop(true,true):第一个animate跳到最终结果,接下来的其他animate都停止;

posted @ 2014-10-11 17:54  495157297  阅读(242)  评论(0编辑  收藏  举报