JQuery動(dòng)畫animate的stop方法使用詳解
更新時(shí)間：2014年05月09日 09:03:51 作者：
這篇文章主要介紹了JQuery動(dòng)畫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)前動(dòng)畫">
<input type="button" id="btn2" value="停止所有動(dòng)畫">
<input type="button" id="btn3" value="停止所有動(dòng)畫，到達(dá)終點(diǎn)">
<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)前動(dòng)畫,沿路返回起點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)暫停在路中
clearInterval();
})
$('#btn2').click(function(){
$('.wrap div').stop(true); // 停止所有動(dòng)畫 去的路程中點(diǎn)擊停止會(huì)直接到達(dá)終點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)暫停在路中
})
$('#btn3').click(function(){
$('.wrap div').stop(true,true); // 停止所有動(dòng)畫 ，去的路程中點(diǎn)擊停止會(huì)直接到達(dá)終點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)停止到在起點(diǎn)
})
// .stop() // 停止當(dāng)前動(dòng)畫
// .stop(true) // 停止所有動(dòng)畫
// .stop(true,true) // 停止所有動(dòng)畫，到達(dá)動(dòng)畫終點(diǎn)
</script>
</body>
</html>
.stop(); // 停止當(dāng)前動(dòng)畫,沿路返回起點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)暫停在路中
.stop(true); // 停止所有動(dòng)畫 去的路程中點(diǎn)擊停止會(huì)直接到達(dá)終點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)暫停在路中
.stop(true,true); // 停止所有動(dòng)畫 ，去的路程中點(diǎn)擊停止會(huì)直接到達(dá)終點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)停止到在起點(diǎn)
復(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)前動(dòng)畫">
<input type="button" id="btn2" value="停止所有動(dòng)畫">
<input type="button" id="btn3" value="停止所有動(dòng)畫，到達(dá)終點(diǎn)">
<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)前動(dòng)畫,沿路返回起點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)暫停在路中
clearInterval();
})
$('#btn2').click(function(){
$('.wrap div').stop(true); // 停止所有動(dòng)畫 去的路程中點(diǎn)擊停止會(huì)直接到達(dá)終點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)暫停在路中
})
$('#btn3').click(function(){
$('.wrap div').stop(true,true); // 停止所有動(dòng)畫 ，去的路程中點(diǎn)擊停止會(huì)直接到達(dá)終點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)停止到在起點(diǎn)
})
// .stop() // 停止當(dāng)前動(dòng)畫
// .stop(true) // 停止所有動(dòng)畫
// .stop(true,true) // 停止所有動(dòng)畫，到達(dá)動(dòng)畫終點(diǎn)
</script>
</body>
</html>
.stop(); // 停止當(dāng)前動(dòng)畫,沿路返回起點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)暫停在路中
.stop(true); // 停止所有動(dòng)畫 去的路程中點(diǎn)擊停止會(huì)直接到達(dá)終點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)暫停在路中
.stop(true,true); // 停止所有動(dòng)畫 ，去的路程中點(diǎn)擊停止會(huì)直接到達(dá)終點(diǎn)，若是返回過程中再點(diǎn)擊，會(huì)停止到在起點(diǎn)
您可能感興趣的文章:
- 詳解jQuery停止動(dòng)畫——stop()方法的使用
- JQuery動(dòng)畫和停止動(dòng)畫實(shí)例代碼
- jQuery動(dòng)畫animate方法使用介紹
- jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
- jquery animate 動(dòng)畫效果使用說明
- jQuery實(shí)現(xiàn)切換頁(yè)面過渡動(dòng)畫效果
- Jquery中使用show()與hide()方法動(dòng)畫顯示和隱藏圖片
- jQuery動(dòng)畫與特效詳解
- 利用jquery制作滾動(dòng)到指定位置觸發(fā)動(dòng)畫
- jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
- jQuery 動(dòng)畫與停止動(dòng)畫效果實(shí)例詳解
相關(guān)文章
相信大家都知道jquery.cookie.js是一個(gè)輕量級(jí)的cookie 插件，可以讀取、寫入、刪除 cookie。下面這篇文章就來給大家簡(jiǎn)單的介紹下關(guān)于jquery.cookie.js的介紹與使用方法，需要的朋友可以參考借鑒，一起來看看吧。2017-02-02
基于jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單
這篇文章主要介紹了jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動(dòng)完成功能
自動(dòng)完成功能是指：類似百度搜索之類的輸入一個(gè)詞的一部分后就自動(dòng)提示，然后用戶可以選擇，不需要再輸入剩余部分。2011-08-08
最近一段時(shí)間準(zhǔn)備開始學(xué)習(xí)JQUERY,感覺JQUERY的功能非常強(qiáng)大,而且代碼量也減少了許多....代碼也非常的清晰!2011-03-03
在一個(gè)不是自己寫的頁(yè)面上，如何快速定位到他綁定的事件代碼在哪,下面為大家簡(jiǎn)單的介紹下,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了showModelDialog彈出文件下載窗口的使用示例，方法很簡(jiǎn)單，大家可以直接參考下面的代碼使用2013-11-11
本篇文章是對(duì)jQuery中的排序組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果,基于jquery實(shí)現(xiàn)頁(yè)面圖文定時(shí)滾動(dòng)效果,涉及jquery頁(yè)面元素的遍歷與樣式的動(dòng)態(tài)操作技巧,是一款經(jīng)典的jquery滾動(dòng)特效,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
這次我們要實(shí)現(xiàn)的控件時(shí)Tab控件，在實(shí)際的應(yīng)用中也比較多2010-05-05