这里讲到了一条语句运行多个JQuery方法(同一个元素)和动画100%完成后执行的callback方法。
<!DOCTYPE html> <html> <head> <title>Callback方法和链的解释</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript"> // Callback函数在当前动画100%完成后执行。 // 例子1:在隐藏效果完全实现后回调函数 // $(function(){ // $('button').click(function(){ // $('p').hide(1000,function(){ // alert('段落现在被隐藏了'); // }) // }) // }) // 例子2,没有回调函数,警告框会在隐藏效果完成前弹出 // $(function(){ // $('button').click(function(){ // $('p').hide(1000); // alert('没有回调函数,警告框会在隐藏效果完成前弹出'); // }) // }); // 通过上面两个不同的案例: // 可以得出callback回调的用法 // 令人奇怪的是同时hide(),含有回调函数的,隐藏过程相对慢一点 // 链(Chaining)准许我们在一条语句上运行多个JQuery方法( // 在相同的元素上) // 优点,浏览器就不必多次查找相同的元素,如需要链接一个动作,你只需要 // 简单的把该动作追加到之前的动作上。 // 我们把css(),slideUp(),slideDown()链接在一起。使元素首先变为红色,然后 // 向上滑动,再然后向下滑动 // $(function(){ // $('button').click(function(){ // $('p').css('color','red').slideUp().slideDown(); // }) // }) // 提示,当进行链接时,代码行会变得很差,不过,jquery // 语法不是很严格。 $(function(){ $('button').click(function(){ $('p').css('color','red') .hide(1000) .show(1); }) }) // 通过测试可只对于show()和hide()不能同时链接,如果放在一起需要 // 加上动画时间才能正确显示出来 </script> </head> <body> <!-- <button>隐藏</button> <p>隐藏效果完全实现后回调函数</p> --> <button>点我</button> <p>菜鸟教程!</p> </body> </html>