Jul
2

jQuery fade and slide toggle plugin

By Cedric Dugas  //  Articles, Javascript / jQuery, Small Projects & plugins, featured  //  72 Comments

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.

Author: Cedric Dugas

Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.

72 Comments to “jQuery fade and slide toggle plugin”

Leave a comment

Articles

RSSSome Tweets