jQuery插件实现简单动画

本篇内容主要讲解“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() 方法

<scripttype="text/javascript">jQuery.fn.fadeToggle1=function(speed,easing,callback){returnthis.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){returnthis.animate({opacity:'toggle',height:'toggle'},speed,easing,callback);};

到此，相信大家对“jQuery插件实现简单动画”有了更深的了解，不妨来实际操作一番吧！这里是恰卡编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！