JQuery動畫animate的stop方法使用詳解
更新時間：2014年05月09日 09:03:51 作者：
這篇文章主要介紹了JQuery動畫animate的stop方法使用,需要的朋友可以參考下
animate語法：
$(selector).animate(styles,speed,easing,callback)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing</title>
<link rel="stylesheet" href="css/reset.css">
<script src="js/jquery.js"></script>
<style>
.wrap {
position: relative;
height: 300px;
width: 300px;
border:5px solid #FCF;
}
.wrap div {
position: absolute;
left: 0;top: 0;
height: 50px;
width: 50px;
background: #FA0;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="停止當(dāng)前動畫">
<input type="button" id="btn2" value="停止所有動畫">
<input type="button" id="btn3" value="停止所有動畫，到達(dá)終點">
<div class="wrap">
<div></div>
</div>
<script>
function moveX(){
$('.wrap div').animate({'left':'250px'},1000).animate({'left':'0px'},1000);
} moveX();
$('#btn1').click(function(){
$('.wrap div').stop(); // 停止當(dāng)前動畫,沿路返回起點，若是返回過程中再點擊，會暫停在路中
clearInterval();
})
$('#btn2').click(function(){
$('.wrap div').stop(true); // 停止所有動畫 去的路程中點擊停止會直接到達(dá)終點，若是返回過程中再點擊，會暫停在路中
})
$('#btn3').click(function(){
$('.wrap div').stop(true,true); // 停止所有動畫 ，去的路程中點擊停止會直接到達(dá)終點，若是返回過程中再點擊，會停止到在起點
})
// .stop() // 停止當(dāng)前動畫
// .stop(true) // 停止所有動畫
// .stop(true,true) // 停止所有動畫，到達(dá)動畫終點
</script>
</body>
</html>
.stop(); // 停止當(dāng)前動畫,沿路返回起點，若是返回過程中再點擊，會暫停在路中
.stop(true); // 停止所有動畫 去的路程中點擊停止會直接到達(dá)終點，若是返回過程中再點擊，會暫停在路中
.stop(true,true); // 停止所有動畫 ，去的路程中點擊停止會直接到達(dá)終點，若是返回過程中再點擊，會停止到在起點
復(fù)制代碼 代碼如下:
$(selector).animate(styles,speed,easing,callback)
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Testing</title>
<link rel="stylesheet" href="css/reset.css">
<script src="js/jquery.js"></script>
<style>
.wrap {
position: relative;
height: 300px;
width: 300px;
border:5px solid #FCF;
}
.wrap div {
position: absolute;
left: 0;top: 0;
height: 50px;
width: 50px;
background: #FA0;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="停止當(dāng)前動畫">
<input type="button" id="btn2" value="停止所有動畫">
<input type="button" id="btn3" value="停止所有動畫，到達(dá)終點">
<div class="wrap">
<div></div>
</div>
<script>
function moveX(){
$('.wrap div').animate({'left':'250px'},1000).animate({'left':'0px'},1000);
} moveX();
$('#btn1').click(function(){
$('.wrap div').stop(); // 停止當(dāng)前動畫,沿路返回起點，若是返回過程中再點擊，會暫停在路中
clearInterval();
})
$('#btn2').click(function(){
$('.wrap div').stop(true); // 停止所有動畫 去的路程中點擊停止會直接到達(dá)終點，若是返回過程中再點擊，會暫停在路中
})
$('#btn3').click(function(){
$('.wrap div').stop(true,true); // 停止所有動畫 ，去的路程中點擊停止會直接到達(dá)終點，若是返回過程中再點擊，會停止到在起點
})
// .stop() // 停止當(dāng)前動畫
// .stop(true) // 停止所有動畫
// .stop(true,true) // 停止所有動畫，到達(dá)動畫終點
</script>
</body>
</html>
.stop(); // 停止當(dāng)前動畫,沿路返回起點，若是返回過程中再點擊，會暫停在路中
.stop(true); // 停止所有動畫 去的路程中點擊停止會直接到達(dá)終點，若是返回過程中再點擊，會暫停在路中
.stop(true,true); // 停止所有動畫 ，去的路程中點擊停止會直接到達(dá)終點，若是返回過程中再點擊，會停止到在起點
相關(guān)文章
相信大家都知道jquery.cookie.js是一個輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。下面這篇文章就來給大家簡單的介紹下關(guān)于jquery.cookie.js的介紹與使用方法，需要的朋友可以參考借鑒，一起來看看吧。2017-02-02
基于jQuery實現(xiàn)火焰燈效果導(dǎo)航菜單
這篇文章主要介紹了jQuery實現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery插件實現(xiàn)非常實用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實現(xiàn)非常實用的tab欄切換功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
基于jquery實現(xiàn)的類似百度搜索的輸入框自動完成功能
自動完成功能是指：類似百度搜索之類的輸入一個詞的一部分后就自動提示，然后用戶可以選擇，不需要再輸入剩余部分。2011-08-08
最近一段時間準(zhǔn)備開始學(xué)習(xí)JQUERY,感覺JQUERY的功能非常強(qiáng)大,而且代碼量也減少了許多....代碼也非常的清晰!2011-03-03
在一個不是自己寫的頁面上，如何快速定位到他綁定的事件代碼在哪,下面為大家簡單的介紹下,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了showModelDialog彈出文件下載窗口的使用示例，方法很簡單，大家可以直接參考下面的代碼使用2013-11-11
本篇文章是對jQuery中的排序組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了jquery實現(xiàn)仿新浪微博評論滾動效果,基于jquery實現(xiàn)頁面圖文定時滾動效果,涉及jquery頁面元素的遍歷與樣式的動態(tài)操作技巧,是一款經(jīng)典的jquery滾動特效,非常具有實用價值,需要的朋友可以參考下2015-08-08
這次我們要實現(xiàn)的控件時Tab控件，在實際的應(yīng)用中也比較多2010-05-05