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>
下一篇： django使用富文本上传图片不显示怎么办
上一篇：jQuery动画效果怎么做
评论