這裡講到了一條語句運行多個JQuery方法（同一個元素）和動畫100%完成後執行的callback方法。 ...
這裡講到了一條語句運行多個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>
