溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery插件實現簡單動畫

發布時間:2021-07-24 14:49:36 來源:億速云 閱讀:126 作者:chen 欄目:web開發

本篇內容主要講解“jQuery插件實現簡單動畫”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“jQuery插件實現簡單動畫”吧!

jQuery 提供了一系列的動畫方法,如  .show("slow")、.hide()、.slideUp()、.slideDown()、.fadeIn()和.fadeOut(),相信這幾個 方法使用 jQuery 的朋友大多數都已經用過了。那么如果我們想要的某種動畫效果沒有時怎么辦呢?今天我們就看看使用 jQuery  自定義方法來實現這個目標。

首先,一直使用 jQuery 的朋友可能知道,在 jQuery 1.4 版本之前是沒有 .fadeToggle() 方法的,關于 .fadeToggle()方法可以參考下jQuery 1.4.4新方法及特性。比如我們要在先前的 jQuery 版本中實現這個效果,我們可以通過充分利用 .animate() 方法來實現,將所需的參數傳遞進去。

1.實現 .fadeToggle() 方法

<script type="text/javascript"> jQuery.fn.fadeToggle1 = function (speed, easing, callback) {     return this.animate({ opacity: 'toggle'}, speed, easing, callback); };  $(document).ready(function () {     $("#fadeToggle1").click(function () {         $("#showfadeToggle").fadeToggle1(1000);     }); }); </script>

fadeToggle

可見最終的效果同 jQuery 1.4.4新方法及特性中一樣,需要注意的是這里為了同 jQuery1.4.4 方法區別,特意命名為 fadeToggle1。

2.實現 slideFadeToggle() 方法

同上述方法類似,實現代碼如下:

jQuery.fn.slideFadeToggle1 = function(speed, easing, callback) {   return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);   };

jQuery插件實現簡單動畫

到此,相信大家對“jQuery插件實現簡單動畫”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女