jquery---stop()

最新推荐文章于 2024-05-24 13:39:19 发布

weixin_30437481

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量47

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/IanI/p/4019527.html

版权

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都停止；

转载于:https://www.cnblogs.com/IanI/p/4019527.html

weixin_30437481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery---stop()

1.测试代码<!doctype html><html> <head lang='en'> <meta charset='utf-8'></meta> <style> #animater{ width: 150px; b...
复制链接

扫一扫