jquery---stop()

浏览数：44 / 时间：2015年06月09日

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()在不同参数下的性能：