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.

Share this article: Facebook Twitter

64 thoughts on “jQuery fade and slide toggle plugin”

  1. Pingback: Mempercantik Content Panjang dengan Toggle - Terango Magazine

  9. 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…

  10. 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 !!

Comments are closed.