首页 jquery正文

jQuery如何做到停止动画效果

启明SEO jquery 2022-03-24 23:29:20 912 0 jQuery停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。


stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。


语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。


可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。


因此,默认地,stop() 会清除在被选元素上指定的当前动画。


下面的例子演示 stop() 方法,不带参数:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<script src="jquery-3.6.0.min.js"></script>
	<script>
	$(function(){
		$('#btn1').click(function(){
			
			
			$('.tutu').animate({left:'250px',width:'200px',height:'200px',opacity:'0.5'},3000);
			
		});
		$('#btn2').click(function(){
			
			
//			$('.tutu').animate({left:'-10px',width:'200px',height:'200px',opacity:'1'});
			$('.tutu').stop()
			
		});
		
		
	});
	
	</script>
	<style type="text/css">
		
		.tutu{
			width:100px;
			height: 100px;
			background-color: red;
			position:relative;
/*			margin: 0 auto;*/
		}
	</style>
	</head>
<body>
	
	<div class="tutu">
	
	</div>
	<input type="button" id="btn1" value="动画一">
	<input type="button" id="btn2" value="动画二">
</body>
</html>


评论

启明SEO微信

有什么问题欢迎添加微信咨询

好文推荐

实时访客入口页面出现bd_vid=标识是什么原因

实时访客入口页面出现bd_vid=标识是什么原因

最近查看百度实时访客,总是会看到入口页面会多......

有了微信视频号,但是没有发布权限,怎么开通

有了微信视频号,但是没有发布权限,怎么开通

视频号是微信在2020年1月19号开始内测的......

如何用python抓取爱企查企业信息

如何用python抓取爱企查企业信息

前段时间,经理让我去找一些企业的信息,我平常......

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

对于一般企业网站或者博客来说,对服务器的配置......

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

修改浏览指纹的方法其实也是很简单,主要使用到......

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

我遇到的问题是电脑原先安装过mysql,卸......