Callback 函数在当前动画 100% 完成之后执行。
jQuery 动画的问题
许多 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 函数。
jQuery Callback 函数
当动画 100% 完成后，即调用 Callback 函数。
典型的语法：
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。
错误（没有 callback）
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>
正确（有 callback）
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 函数。