Follow me on twitter Follow the position absolute RSS feed
2
July

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!



38 Comments on this article

  1. Steven says:

    Your fade is a nice addition

  2. RK says:

    Nice!

  3. Jim says:

    Its not working in IE7

  4. Kadir GÜNAY says:

    This is so useful. I translated Turkish and published at my home page. Thank you for this plugin.

  5. [...] Choose It AKPC_IDS += “141,”; tweetmeme_url = ‘http://choosedaily.com/141/jquery-fade-slide-toggle-plugin/’;tweetmeme_source = ‘choosedaily’;tweetmeme_style = ‘compact’; This entry was posted on Tuesday, July 7th, 2009. You can leave a comment, or trackback from your own site. [...]

  6. andi says:

    indeed, it has problems in IE7. doesn`t stay open.

  7. Caspar says:

    nice little idea.. but here’s a little improvement:
    - remove the css style from the source
    - use toggle for the opacity and thus shrinking the function :)

    jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: ‘toggle’, height: ‘toggle’}, speed, easing, callback);
    };

  8. Cedric Dugas says:

    The IE bug is corrected sorry about that, dunno how i could have missed that

  9. Reece Cropley says:

    Hey I have used this in a site of mine. Using multiple additions of the div class “fader”, sometime when I click to open the slider the text is not visible although the slider hasn’t changed.
    Any ideas why this is happening. Try switching to the about or contact part then back to home if it doesnt dissappear for you.
    http://users.aber.ac.uk/rpc7/menufaderandslider
    Thanks in Advance Reece (reece_cropley@hotmail.com)

  10. [...] jQuery fade and slide toggle plugin [...]

  11. JDStraughan says:

    Great jquery tutorial. Added to http://tutlist.com

  12. countocram says:

    very simple and nice! just what I was looking for! thanks!

  13. Rob says:

    Great plugin. Will add this to http://www.web-design-talk.co.uk

  14. Josh says:

    Thanks so much for this wonderful plugin and tutorial. It has been implemented on JhanellesFashions.com

  15. [...] jQuery fade and slide toggle pluginThe jquery slidetoggle() is great, but but this plugin allows some opacity fading in the sliding animation. This is a very small plugin, but with different effects than regular sliding. [...]

  16. Xaliber says:

    This would be more lovely if integrated with cookies. :) That is, the script would remember whether the state is collapsed or expanded.

  17. admin says:

    Hey xaliber,

    This is a good idea, but it was originally planned as a replacement of the slidetoggle jquery core fx, and follow the same rules.

  18. Xaliber says:

    Hmm… so does that mean this could be integrated with the jQuery Cookies plugin?

  19. [...] jQuery fade and slide toggle plugin The jquery slidetoggle() is great, but but this plugin allows some opacity fading in the sliding animation. This is a very small plugin, but with different effects than regular sliding. [...]

  20. Jason says:

    You made a mountain out of a molehill. A toggle() function on the click element and fadein() on the sliding element would have sufficed.

  21. Cedric Dugas says:

    I certainly don’t see this small plugin as a mountain

  22. Gport says:

    Demo does not work over here.

  23. Cedric Dugas says:

    What browser are you using?

  24. [...] jQuery plugin fade e slide toggle [...]

  25. [...] フェードしながらスライドするjQueryプラグイン デモ [...]

  26. Rakibul islam says:

    Just added at Technology Story

  27. Lauri says:

    Thanks for the nice plug-in! BTW, your examples have a minor case-sensitivity bug: instead fadesliderToggle you should have fadeSliderToggle

  28. Rajesh says:

    Good Plug-in but one issue, In fader div content font style: ‘Arial’, ‘bold’ is not supported. Bold fonts are not displays properly

  29. [...] for Web Developers Simple Way to Random Display or Rotate Content Using JavaScript and CSS jQuery fade and slide toggle plugin 15 Ways to Improve CSS Techniques Using jQuery jQuery Link Nudge Plugin 37 More Shocking jQuery [...]

  30. poe says:

    Pakaaoo, bakwaas faltoo demo

  31. pawan damase says:

    i think this site is great

  32. Sergey says:

    Please, check your examples on this page.
    There is no function “fadesliderToggle” in the plugin.

  33. Anthony says:

    Hi, thanks for this!

    Could you please tell me how I can use this if the link to activate the toggle if it’s not directly above the div that it has to toggle?

  34. John says:

    Damn! I shouldn’t have used tags. This is what I meant to say:

    I would also like to know that. My anchor element is inside a paragraph, for semantic purposes, but this seems to stop the sliding effect from working. I’m completely new to jquery and javascript in general so any help would be appreciated.

Leave a Reply