jQuery插件-簡單動(dòng)畫
jQuery 提供了一系列的動(dòng)畫方法，如 .show("slow")、.hide()、.slideUp()、.slideDown()、.fadeIn()和.fadeOut()，相信這幾個(gè) 方法使用 jQuery 的朋友大多數(shù)都已經(jīng)用過了。那么如果我們想要的某種動(dòng)畫效果沒有時(shí)怎么辦呢？今天我們就看看使用 jQuery 自定義方法來實(shí)現(xiàn)這個(gè)目標(biāo)。
首先，一直使用 jQuery 的朋友可能知道，在 jQuery 1.4 版本之前是沒有 .fadeToggle() 方法的，關(guān)于 .fadeToggle()方法可以參考下jQuery 1.4.4新方法及特性。比如我們要在先前的 jQuery 版本中實(shí)現(xiàn)這個(gè)效果，我們可以通過充分利用 .animate() 方法來實(shí)現(xiàn)，將所需的參數(shù)傳遞進(jìn)去。
1.實(shí)現(xiàn) .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>
可見最終的效果同 jQuery 1.4.4新方法及特性中一樣，需要注意的是這里為了同 jQuery1.4.4 方法區(qū)別，特意命名為 fadeToggle1。
2.實(shí)現(xiàn) slideFadeToggle() 方法
同上述方法類似，實(shí)現(xiàn)代碼如下：
- jQuery.fn.slideFadeToggle1 = function(speed, easing, callback) {
- return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
- };
原文見：http://www.learningjquery.com/2008/02/simple-effects-plugins，里邊有詳細(xì)的解釋。
原文鏈接：http://www.jquery001.com/jquery-simple-effects-plugins.html
