知识点---animate()动画滞后执行的解决方案

时间 2019-11-24

标签知识 animate 动画滞后执行解决方案繁體版

原文原文链接

jQuery动画：javascript

animate 容易出现连续触发、滞后反复执行的现象；css

针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有以下：html

一、在触发元素上的事件设置为延迟处理, 便可避免滞后反复执行的问题（使用setTimeout）java

二、在触发元素的事件时预先中止全部的动画，再执行相应的动画事件（使用stop）推荐这种。jquery

//第二种方式 $(".container").stop();//中止当前动画，继续下一个动画 $(".container").stop(true);//清除元素的全部动画 $(".container").stop(false, true);//让当前动画直接到达末状态，继续下一个动画 $(".container").stop(true, true);//清除元素的全部动画，让当前动画直接到达末状态ide

//例如，动画

1 $(".container").stop().animate({ 2 marginTop:"60px", 3 　　width:"100px", 4 height:"50px" 5 },500);

动画效果1、spa

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
　　$("#start").click(function(){
　　　　$("div").animate({height:300},1500);
　　　　$("div").animate({width:300},1500);
　　　　$("div").animate({height:100},1500);
　　　　$("div").animate({width:100},1500);
　　});
　　$("#stop").click(function(){
　　　　$("div").clearQueue();
　　});
});
</script>
</head>
<body>cdn

　　<button id="start">开始动画</button>
　　<button id="stop">中止动画</button>
　　<br><br>
　　<div style="background:red;height:100px;width:100px;"></div>

</body>
</html>htm

动画效果2、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
　　$("#flip").click(function(){
　　　　$("#panel").slideToggle("slow");
　　});
});
</script>

<style type="text/css">
　　#panel,#flip
　　{
　　padding:5px;
　　text-align:center;
　　background-color:#e5eecc;
　　border:solid 1px #c3c3c3;
　　}
　　#panel
　　{
　　padding:50px;
　　display:none;
　　}
</style>
</head>
<body>

　　<div id="flip">点我，显示或隐藏面板。</div>
　　<div id="panel">Hello world!</div>

</body>
</html>

动画效果3、

<html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $(".btn1").click(function(){ $("p").animate({top:"100px"}); }); $(".btn2").click(function(){ $("p").animate({top:"0px"}); });});</script></head><body> <button class="btn1">动画</button><button class="btn2">重置</button><p style="position:relative">这是一个段落。</p> </body></html>