网站建设资讯

NEWS

网站建设资讯

jQuery插件实现简单动画

本篇内容主要讲解“jQuery插件实现简单动画”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery插件实现简单动画”吧!

创新互联是一家专注于网站建设、网站制作与策划设计,合水网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:合水等地区。合水做网站价格咨询:13518219792

jQuery 提供了一系列的动画方法,如  .show("slow")、.hide()、.slideUp()、.slideDown()、.fadeIn()和.fadeOut(),相信这几个 方法使用 jQuery 的朋友大多数都已经用过了。那么如果我们想要的某种动画效果没有时怎么办呢?今天我们就看看使用 jQuery  自定义方法来实现这个目标。

首先,一直使用 jQuery 的朋友可能知道,在 jQuery 1.4 版本之前是没有 .fadeToggle() 方法的,关于 .fadeToggle()方法可以参考下jQuery 1.4.4新方法及特性。比如我们要在先前的 jQuery 版本中实现这个效果,我们可以通过充分利用 .animate() 方法来实现,将所需的参数传递进去。

1.实现 .fadeToggle() 方法

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

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插件实现简单动画”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文题目:jQuery插件实现简单动画
本文URL:http://cdweb.net/article/jpdidi.html