Jul
2

jQuery fade and slide toggle plugin

The jquery slidetoggle() is great, but one thing I always thought it was missing is some opacity fading in the sliding animation. When I was coding this iteration of position absolute I wanted this kind of animation so I went there and coded it.

This is a very small plugin, but I still find the effect cooler than a regular sliding.

View demo

Get this to work

First add dependencies in your head document,

  1. <script src="js/jquery.js" type="text/javascript"></script>
  2. <script type="text/JavaScript" src="js/jquery.fadeSliderToggle.js"></script>

In your dom ready add something like this:

  1. $(document).ready(function() {
  2.  $(".fadeNext").click(function(){  
  3.   $(this).next().fadesliderToggle()
  4.   return false;
  5.  })
  6. })

Customizations

You can change the animation speed or the easing easily (you need jQuery UI for a non-default easing).

  1.  $(".tagBtn").click(function(){  
  2.   $(this).next().fadesliderToggle({
  3.     speed:300,
  4.     easing : "swing"
  5.   })
  6.   return false;
  7.  })

That’s it !

Download the source code View demo

Version 1.1 online
July 7, version1.1 : IE bug correction

Tested on:
Firefox 3+
Internet Exploder 6&7
Safari 4



If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!


Ads

The test king offers you professional testking CISA training with self paced testking 642-357 study guide to help you keep up with latest tools and trends in information technology.

72 Comments to “jQuery fade and slide toggle plugin”

Leave a comment

RSSSome Tweets