007_停止动画或效果
生活随笔
收集整理的這篇文章主要介紹了
007_停止动画或效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. jQuery stop()方法
1.1. jQuery stop()方法用于在動(dòng)畫(huà)或效果完成前對(duì)它們進(jìn)行停止。
1.2. stop()方法適用于所有jQuery效果函數(shù), 包括隱藏顯示、淡入淡出、滑動(dòng)和自定義動(dòng)畫(huà)。
1.3. 語(yǔ)法
$(selector).stop(stopAll,goToEnd);1.4. 可選的stopAll參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列。默認(rèn)是false, 即僅停止活動(dòng)的動(dòng)畫(huà), 允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行。如果為true, 當(dāng)前活動(dòng)動(dòng)畫(huà)停止, 同時(shí)也清空動(dòng)畫(huà)隊(duì)列。
1.5. 可選的goToEnd參數(shù)規(guī)定是否立即完成當(dāng)前活動(dòng)動(dòng)畫(huà)。默認(rèn)是false。
1.6. 因此, 默認(rèn)地stop()會(huì)清除在被選元素上指定的當(dāng)前活動(dòng)動(dòng)畫(huà), 允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行。
1.7. 下面的例子演示stop()方法, 不帶參數(shù):
$("#stop").click(function(){$("#panel").stop(); });2. 例子
2.1. 代碼
<!DOCTYPE html> <html><head><title>jQuery停止動(dòng)畫(huà)或效果</title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("div").hide(3000);$("div").show(3000);});$('#btn2').click(function(){$("div").fadeOut(3000);$("div").fadeIn(3000);});$('#btn3').click(function(){$("div").slideUp(3000);$("div").slideDown(3000);});$('#btn4').click(function(){var div = $("div");div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "slow");div.animate({width:'+=50px', opacity: '0.1', fontSize: '3em'}, "1000");div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "2000");div.animate({width:'+=50px', opacity: '1', fontSize: '1em'}, "slow");});$('#btn5').click(function(){$("div").stop();});$('#btn6').click(function(){$("div").stop(false, false);});$('#btn7').click(function(){$("div").stop(true, false);});$('#btn8').click(function(){$("div").stop(false, true);});$('#btn9').click(function(){$("div").stop(true, true);});});</script></head><body><button id="btn1">3s隱藏效果/3s顯示效果</button><button id="btn2">3s淡出效果/3s淡入效果</button><button id="btn3">3s向上滑動(dòng)效果/3s向下滑動(dòng)效果</button><button id="btn4">動(dòng)畫(huà)</button><br /><br /><button id="btn5">(默認(rèn))停止動(dòng)畫(huà)或效果</button> <button id="btn6">停止動(dòng)畫(huà)或效果</button> <button id="btn7">清除動(dòng)畫(huà)隊(duì)列, 停止動(dòng)畫(huà)或效果</button><button id="btn8">當(dāng)前動(dòng)畫(huà)立即完成</button> <button id="btn9">清除動(dòng)畫(huà)隊(duì)列, 當(dāng)前動(dòng)畫(huà)立即完成</button><br /><br /><div style="background-color: red; width:300px; height: 150px; position: relative;">jQuery stop()方法用于在動(dòng)畫(huà)或效果完成前對(duì)它們進(jìn)行停止。</div></body> </html>2.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的007_停止动画或效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 006_动画
- 下一篇： 008_效果和动画的Callback函数