當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

008_效果和动画的Callback函数

發(fā)布時(shí)間：2025/4/17 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 008_效果和动画的Callback函数小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. Callback函數(shù)在當(dāng)前效果或動(dòng)畫(huà)100%完成之后執(zhí)行。

2. jQuery動(dòng)畫(huà)的問(wèn)題

2.1. 許多jQuery函數(shù)涉及動(dòng)畫(huà)。這些函數(shù)也許會(huì)將speed或duration作為可選參數(shù)。

2.2. speed或duration參數(shù)可以設(shè)置許多不同的值, 比如: "slow", "fast", "normal"或毫秒。

2.3. 由于JavaScript語(yǔ)句(指令)是按照次序逐一執(zhí)行的, 動(dòng)畫(huà)之后的語(yǔ)句可能會(huì)產(chǎn)生錯(cuò)誤或頁(yè)面沖突, 因?yàn)閯?dòng)畫(huà)還沒(méi)有完成。

2.4. 為了避免這個(gè)情況, 您可以以參數(shù)的形式添加Callback函數(shù)。

3. jQuery Callback函數(shù)

3.1. 當(dāng)動(dòng)畫(huà)100%完成后, 即調(diào)用Callback函數(shù)。

3.2. 典型的語(yǔ)法:

$(selector).hide(speed,callback)

3.3. callback參數(shù)是一個(gè)在hide操作完成后被執(zhí)行的函數(shù)。

3.4. 錯(cuò)誤(沒(méi)有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. 結(jié)論: 如果您希望在一個(gè)涉及動(dòng)畫(huà)的函數(shù)之后來(lái)執(zhí)行語(yǔ)句, 請(qǐng)使用callback函數(shù)。

4. 例子

4.1. 代碼

<!DOCTYPE html> <html><head><title>jQuery效果和動(dòng)畫(huà)的Callback函數(shù)</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('隱藏效果執(zhí)行完畢。')});});$('#btn2').click(function(){$("div").show('normal', function(){alert('顯示效果執(zhí)行完畢。')});});$('#btn3').click(function(){$("div").fadeOut('normal', function(){alert('淡出效果執(zhí)行完畢。')});});$('#btn4').click(function(){$("div").fadeIn('normal', function(){alert('淡入效果執(zhí)行完畢。')});});$('#btn5').click(function(){$("div").slideUp('normal', function(){alert('向上滑動(dòng)效果執(zhí)行完畢。')});});$('#btn6').click(function(){$("div").slideDown('normal', function(){alert('向下滑動(dòng)效果執(zhí)行完畢。')});});$('#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('動(dòng)畫(huà)序列執(zhí)行完畢。')});});});</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向上滑動(dòng)效果</button> <button id="btn6">3s向下滑動(dòng)效果</button><button id="btn7">動(dòng)畫(huà)</button><br /><br /><div style="background-color: red; width:300px; height: 150px; position: relative;">jQuery效果和動(dòng)畫(huà)的Callback函數(shù)</div></body> </html>

4.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的008_效果和动画的Callback函数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。