知識點---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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。