008_效果和动画的Callback函数
生活随笔
收集整理的這篇文章主要介紹了
008_效果和动画的Callback函数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. Callback函數在當前效果或動畫100%完成之后執行。
2. jQuery動畫的問題
2.1. 許多jQuery函數涉及動畫。這些函數也許會將speed或duration作為可選參數。
2.2. speed或duration參數可以設置許多不同的值, 比如: "slow", "fast", "normal"或毫秒。
2.3. 由于JavaScript語句(指令)是按照次序逐一執行的, 動畫之后的語句可能會產生錯誤或頁面沖突, 因為動畫還沒有完成。
2.4. 為了避免這個情況, 您可以以參數的形式添加Callback函數。
3. jQuery Callback函數
3.1. 當動畫100%完成后, 即調用Callback函數。
3.2. 典型的語法:
$(selector).hide(speed,callback)3.3. callback參數是一個在hide操作完成后被執行的函數。
3.4. 錯誤(沒有callback)
$("p").hide(1000); alert("The paragraph is now hidden");3.5. 正確(有callback)
$("p").hide(1000,function(){alert("The paragraph is now hidden"); });3.6. 結論: 如果您希望在一個涉及動畫的函數之后來執行語句, 請使用callback函數。
4. 例子
4.1. 代碼
<!DOCTYPE html> <html><head><title>jQuery效果和動畫的Callback函數</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('normal', function(){alert('隱藏效果執行完畢。')});});$('#btn2').click(function(){$("div").show('normal', function(){alert('顯示效果執行完畢。')});});$('#btn3').click(function(){$("div").fadeOut('normal', function(){alert('淡出效果執行完畢。')});});$('#btn4').click(function(){$("div").fadeIn('normal', function(){alert('淡入效果執行完畢。')});});$('#btn5').click(function(){$("div").slideUp('normal', function(){alert('向上滑動效果執行完畢。')});});$('#btn6').click(function(){$("div").slideDown('normal', function(){alert('向下滑動效果執行完畢。')});});$('#btn7').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", function(){alert('動畫序列執行完畢。')});});});</script></head><body><button id="btn1">3s隱藏效果</button> <button id="btn2">3s顯示效果</button><button id="btn3">3s淡出效果</button> <button id="btn4">3s淡入效果</button><button id="btn5">3s向上滑動效果</button> <button id="btn6">3s向下滑動效果</button><button id="btn7">動畫</button><br /><br /><div style="background-color: red; width:300px; height: 150px; position: relative;">jQuery效果和動畫的Callback函數</div></body> </html>4.2. 效果圖
總結
以上是生活随笔為你收集整理的008_效果和动画的Callback函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 007_停止动画或效果
- 下一篇： 009_jQuery链式编程