當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

008_效果和动画的Callback函数

發布時間：2025/4/17 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 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函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。