動畫 · 廖雪峰 JavaScript Python Git 教程

# 動畫用JavaScript實現動畫，原理非常簡單：我們只需要以固定的時間間隔（例如，0.1秒），每次把DOM元素的CSS樣式修改一點（例如，高寬各增加10%），看起來就像動畫了。但是要用JavaScript手動實現動畫效果，需要編寫非常復雜的代碼。如果想要把動畫效果用函數封裝起來便于復用，那考慮的事情就更多了。使用jQuery實現動畫，代碼已經簡單得不能再簡化了：只需要一行代碼！讓我們先來看看jQuery內置的幾種動畫樣式： ## show / hide 直接以無參數形式調用`show()`和`hide()`，會顯示和隱藏DOM元素。但是，只要傳遞一個時間參數進去，就變成了動畫： ``` var div = $('#test-show-hide'); div.hide(3000); // 在3秒鐘內逐漸消失 ``` 時間以毫秒為單位，但也可以是`'slow'`，`'fast'`這些字符串： ``` var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒鐘內逐漸顯示 ``` `toggle()`方法則根據當前狀態決定是`show()`還是`hide()`。 ## slideUp / slideDown 你可能已經看出來了，`show()`和`hide()`是從左上角逐漸展開或收縮的，而`slideUp()`和`slideDown()`則是在垂直方向逐漸展開或收縮的。 `slideUp()`把一個可見的DOM元素收起來，效果跟拉上窗簾似的，`slideDown()`相反，而`slideToggle()`則根據元素是否可見來決定下一步動作： ``` var div = $('#test-slide'); div.slideUp(3000); // 在3秒鐘內逐漸向上消失 ``` ## fadeIn / fadeOut `fadeIn()`和`fadeOut()`的動畫效果是淡入淡出，也就是通過不斷設置DOM元素的`opacity`屬性來實現，而`fadeToggle()`則根據元素是否可見來決定下一步動作： ``` var div = $('#test-fade'); div.fadeOut('slow'); // 在0.6秒內淡出 ``` <button class="uk-button" onclick="$('#test-fade').fadeOut('slow');">fadeOut('slow')</button> <button class="uk-button" onclick="$('#test-fade').fadeIn('slow');">fadeIn('slow')</button> <button class="uk-button" onclick="$('#test-fade').fadeToggle('slow');">fadeToggle('slow')</button> ## 自定義動畫如果上述動畫效果還不能滿足你的要求，那就祭出最后大招：`animate()`，它可以實現任意動畫效果，我們需要傳入的參數就是DOM元素最終的CSS狀態和時間，jQuery在時間段內不斷調整CSS直到達到我們設定的值： ``` var div = $('#test-animate'); div.animate({ opacity: 0.25, width: '256px', height: '256px' }, 3000); // 在3秒鐘內CSS過渡到設定值 ``` `animate()`還可以再傳入一個函數，當動畫結束時，該函數將被調用： ``` var div = $('#test-animate'); div.animate({ opacity: 0.25, width: '256px', height: '256px' }, 3000, function () { console.log('動畫已結束'); // 恢復至初始狀態: $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px'); }); ``` 實際上這個回調函數參數對于基本動畫也是適用的。有了`animate()`，你就可以實現各種自定義動畫效果了： ## 串行動畫 jQuery的動畫效果還可以串行執行，通過`delay()`方法還可以實現暫停，這樣，我們可以實現更復雜的動畫效果，而代碼卻相當簡單： ``` var div = $('#test-animates'); // 動畫效果：slideDown - 暫停 - 放大 - 暫停 - 縮小 div.slideDown(2000) .delay(1000) .animate({ width: '256px', height: '256px' }, 2000) .delay(1000) .animate({ width: '128px', height: '128px' }, 2000); } </script> ``` 因為動畫需要執行一段時間，所以jQuery必須不斷返回新的Promise對象才能后續執行操作。簡單地把動畫封裝在函數中是不夠的。 ## 為什么有的動畫沒有效果你可能會遇到，有的動畫如`slideUp()`根本沒有效果。這是因為jQuery動畫的原理是逐漸改變CSS的值，如`height`從`100px`逐漸變為`0`。但是很多不是block性質的DOM元素，對它們設置`height`根本就不起作用，所以動畫也就沒有效果。此外，jQuery也沒有實現對`background-color`的動畫效果，用`animate()`設置`background-color`也沒有效果。這種情況下可以使用CSS3的`transition`實現動畫效果。 ## 練習在執行刪除操作時，給用戶顯示一個動畫比直接調用`remove()`要更好。請在表格刪除一行的時候添加一個淡出的動畫效果： ``` 'use strict'; function deleteFirstTR() { var tr = $('#test-table>tbody>tr:visible').first(); } deleteFirstTR(); ``` # AJAX 用JavaScript寫AJAX前面已經介紹過了，主要問題就是不同瀏覽器需要寫不同代碼，并且狀態和錯誤處理寫起來很麻煩。用jQuery的相關對象來處理AJAX，不但不需要考慮瀏覽器問題，代碼也能大大簡化。 ## ajax jQuery在全局對象`jQuery`（也就是`$`）綁定了`ajax()`函數，可以處理AJAX請求。`ajax(url, settings)`函數需要接收一個URL和一個可選的`settings`對象，常用的選項如下： * async：是否異步執行AJAX請求，默認為`true`，千萬不要指定為`false`； * method：發送的Method，缺省為`'GET'`，可指定為`'POST'`、`'PUT'`等； * contentType：發送POST請求的格式，默認值為`'application/x-www-form-urlencoded; charset=UTF-8'`，也可以指定為`text/plain`、`application/json`； * data：發送的數據，可以是字符串、數組或object。如果是GET請求，data將被轉換成query附加到URL上，如果是POST請求，根據contentType把data序列化成合適的格式； * headers：發送的額外的HTTP頭，必須是一個object； * dataType：接收的數據格式，可以指定為`'html'`、`'xml'`、`'json'`、`'text'`等，缺省情況下根據響應的`Content-Type`猜測。下面的例子發送一個GET請求，并返回一個JSON格式的數據： ``` var jqxhr = $.ajax('/api/categories', { dataType: 'json' }); // 請求已經發送了 ``` 不過，如何用回調函數處理返回的數據和出錯時的響應呢？還記得Promise對象嗎？jQuery的jqXHR對象類似一個Promise對象，我們可以用鏈式寫法來處理各種回調： ``` 'use strict'; function ajaxLog(s) { var txt = $('#test-response-text'); txt.val(txt.val() + '\n' + s); } $('#test-response-text').val(''); var jqxhr = $.ajax('/api/categories', { dataType: 'json' }).done(function (data) { ajaxLog('成功, 收到的數據: ' + JSON.stringify(data)); }).fail(function (xhr, status) { ajaxLog('失敗: ' + xhr.status + ', 原因: ' + status); }).always(function () { ajaxLog('請求完成: 無論成功或失敗都會調用'); }); ``` ## get 對常用的AJAX操作，jQuery提供了一些輔助方法。由于GET請求最常見，所以jQuery提供了`get()`方法，可以這么寫： ``` var jqxhr = $.get('/path/to/resource', { name: 'Bob Lee', check: 1 }); ``` 第二個參數如果是object，jQuery自動把它變成query string然后加到URL后面，實際的URL是： ``` /path/to/resource?name=Bob%20Lee&check=1 ``` 這樣我們就不用關心如何用URL編碼并構造一個query string了。 ## post `post()`和`get()`類似，但是傳入的第二個參數默認被序列化為`application/x-www-form-urlencoded`： ``` var jqxhr = $.post('/path/to/resource', { name: 'Bob Lee', check: 1 }); ``` 實際構造的數據`name=Bob%20Lee&check=1`作為POST的body被發送。 ## getJSON 由于JSON用得越來越普遍，所以jQuery也提供了`getJSON()`方法來快速通過GET獲取一個JSON對象： ``` var jqxhr = $.getJSON('/path/to/resource', { name: 'Bob Lee', check: 1 }).done(function (data) { // data已經被解析為JSON對象了 }); ``` ## 安全限制 jQuery的AJAX完全封裝的是JavaScript的AJAX操作，所以它的安全限制和前面講的用JavaScript寫AJAX完全一樣。如果需要使用JSONP，可以在`ajax()`中設置`jsonp: 'callback'`，讓jQuery實現JSONP跨域加載數據。關于跨域的設置請參考[瀏覽器](/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997647015f03abc1bb5f46129a7526292a12ab26000) - [AJAX](/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000)一節中CORS的設置。