标签:
Callback 函数在当前动画 100% 完成之后执行。
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子:$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script type="text/javascript"> 6 $(document).ready(function(){ 7 $("button").click(function(){ 8 $("p").hide(1000); 9 }); 10 }); 11 </script> 12 </head> 13 <body> 14 <button type="button">隐藏</button> 15 <p>这是一个段落。</p> 16 <p>这是另一个段落。</p> 17 </body> 18 </html>
默认: 点击后:
由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加 Callback 函数。
当动画 100% 完成后,即调用 Callback 函数。
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。
1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6 $("button").click(function(){ 7 $("p").hide(2000); 8 alert("The paragraph is now hidden"); 9 }); 10 }); 11 </script> 12 </head> 13 <body> 14 <button type="button">Hide</button> 15 <p>This is a paragraph with little content.</p> 16 </body> 17 </html>
1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript"> 5 $(document).ready(function(){ 6 $("button").click(function(){ 7 $("p").hide(1000,function(){ 8 alert("The paragraph is now hidden"); 9 }); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <button type="button">Hide</button> 16 <p>This is a paragraph with little content.</p> 17 </body> 18 </html>
结论:如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。
标签:
原文地址:http://www.cnblogs.com/sihuiming/p/5337026.html