007_停止动画或效果
生活随笔
收集整理的這篇文章主要介紹了
007_停止动画或效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. jQuery stop()方法
1.1. jQuery stop()方法用于在動畫或效果完成前對它們進行停止。
1.2. stop()方法適用于所有jQuery效果函數, 包括隱藏顯示、淡入淡出、滑動和自定義動畫。
1.3. 語法
$(selector).stop(stopAll,goToEnd);1.4. 可選的stopAll參數規定是否應該清除動畫隊列。默認是false, 即僅停止活動的動畫, 允許任何排入隊列的動畫向后執行。如果為true, 當前活動動畫停止, 同時也清空動畫隊列。
1.5. 可選的goToEnd參數規定是否立即完成當前活動動畫。默認是false。
1.6. 因此, 默認地stop()會清除在被選元素上指定的當前活動動畫, 允許任何排入隊列的動畫向后執行。
1.7. 下面的例子演示stop()方法, 不帶參數:
$("#stop").click(function(){$("#panel").stop(); });2. 例子
2.1. 代碼
<!DOCTYPE html> <html><head><title>jQuery停止動畫或效果</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向上滑動效果/3s向下滑動效果</button><button id="btn4">動畫</button><br /><br /><button id="btn5">(默認)停止動畫或效果</button> <button id="btn6">停止動畫或效果</button> <button id="btn7">清除動畫隊列, 停止動畫或效果</button><button id="btn8">當前動畫立即完成</button> <button id="btn9">清除動畫隊列, 當前動畫立即完成</button><br /><br /><div style="background-color: red; width:300px; height: 150px; position: relative;">jQuery stop()方法用于在動畫或效果完成前對它們進行停止。</div></body> </html>2.2. 效果圖
總結
以上是生活随笔為你收集整理的007_停止动画或效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 006_动画
- 下一篇： 008_效果和动画的Callback函数