jQuery fade and slide toggle plugin

by Cedric Dugas on July 2, 2009

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,

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

In your dom ready add something like this:

$(document).ready(function() {
 $(".fadeNext").click(function(){   
  $(this).next().fadesliderToggle()
  return false;
 })
})

Customizations

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

 $(".tagBtn").click(function(){   
  $(this).next().fadesliderToggle({
    speed:300,
    easing : "swing"
  })
  return false;
 })

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.

76 comments

That´s bad! Display:none will not supportet to SEO!

by Julian on April 27, 2011 at 6:37 pm. #

it’s a nice content.

by Email Letterhead on April 29, 2011 at 3:51 am. #

Thanks for the great article. If you have time to try to come visit me at asbestoscancermesothelioma.com.

by asbestoscancermesothelioma on May 3, 2011 at 3:11 am. #

33MPoP http://gdjI3b7VaWpU1m0dGpvjRrcu9Fk.com

by frenky on May 7, 2011 at 12:25 pm. #

Your source code makes me easy to understand. Thank you very much.

by symptomsofbenzodiazepinewithdrawal on May 11, 2011 at 2:31 am. #

Oh! Thank for Example.

by Frontline Plus on May 20, 2011 at 12:19 pm. #

Keep up the good work, I think you are doing a very good job

by Sharleen Cills on June 23, 2011 at 11:01 am. #

That’s very nice indeed – I’ve also made a plugin very similar to like this but with the sliding effects happening one after the other, I wonder if you’d be interested in taking a look…

by Matt on June 30, 2011 at 6:50 am. #

hi

I am the creator of a theme for the zenphoto CMS.
this theme use your script “Fade and Toggle Slide” : thanks for giving it to the community.

I have a question : is there a way to force the execution of the script in some case ?

I explain :
my comment box is showing by the script.
but when you validate your comment, there is a refresh, and the box is hidden by the script.
so you can’t see your comment, but even worse, you can not see the errors in the emission of the comment (missing or invalid email for example)

you can seen it in live :
http://vincent.bourganel.free.fr/zenphoto/index.php?p=news&title=zpArdoise-a-ZenPhoto-ZenPage-theme

do you have a solution to my problem ?
thanks in advance for any help !!

by vincent3569 on September 7, 2011 at 10:18 am. #

I’m a trainee pedo portal
 :]]

by Sdgkcmsl on September 7, 2011 at 7:58 pm. #

Could you ask him to call me? brainchild films oqit

by Owozkpio on September 17, 2011 at 6:39 am. #

Are you a student? kate model child 426917

by Vsjpjytr on September 17, 2011 at 5:11 pm. #

I’m in my first year at university Cute Model Teen
 >:-]]

by Sqnqwlmk on September 19, 2011 at 4:55 pm. #

wonderfull great article….

by Palak Soni on January 4, 2012 at 12:53 am. #

Thank you very much. It’s a nice content.

by BestZa on February 1, 2012 at 8:25 am. #

I saw the JQuery have a lot of site. I interest a beautiful style and found in this site.Thank you very much.

by blogidev on February 28, 2012 at 10:04 pm. #

I love JQuery and JavaScript by PHP Programming.

by ทรงผม on February 28, 2012 at 10:21 pm. #

Insert your card http://sakebemimeras.de.tl child underwear model this girl was cuming really good she was enjyoing it as you can see cum out of her pussy thats what indian girls do ive had girls of every nationality they all act different

by Ubevypqz on May 3, 2012 at 6:29 pm. #

I’ve come to collect a parcel http://jotonoirih.de.tl cosmo promotional models My wife is sexy like this and plays with her black big dildo when i am not there…. a turn on. Then she occasionally gets the REAL black thing and I watch..

by Cajuphwn on May 6, 2012 at 10:15 pm. #