更新時間:2021-08-13 來源:黑馬程序員 瀏覽量:
為了滿足動畫實現(xiàn)的靈活性,解決單個方法實現(xiàn)動畫的單一性,jQvery中提供了animate() 方法讓用戶可以自定義動畫。語法如下所示。
$ (selector).animate (params[, speed][, easing][, fn])
上述語法中,params表示想要更改的樣式,以對象形式傳遞,樣式名可以不用帶引號,舊如果樣式名中有“-”( 如 border-left ),需要用駝峰命名法(如borderLeft)。其余參數(shù)的含義與前面講過的動畫方法相同,不再贅述。
下面我們通過代碼演示如何利用animate()方法創(chuàng)建自定義動畫。
<style> div { width: 50px; height: 50px; background-color: P:pink;position:absolute; </style> <button>動起來</button> <div></div> <script> $ ("button") . click(function(){ $("div") .animate({ left: 500, top: 300, opacity: .4, width: 500 },500); }; </script>
上述代碼中,第4行代碼定義按鈕。第5行代碼定義div元素。第7 ~ 9行代碼給頁面中的“動起來” 按鈕綁定單擊事件,當(dāng)單擊鼠標時通過第8行代碼將div元素運動到距離人側(cè)50x、距離頂部30px的位置,透明度為0.4,寬度為500px。