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.

64 thoughts on “jQuery fade and slide toggle plugin

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

  2. 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);
    };

  3. 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)

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

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

  6. 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.

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

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

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

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

  11. 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.

  12. Alcohol is not good for your health. We don’t want to make your brain non-functioning!!

  13. It’s probably also a good idea to throw in a stop(true, true) somewhere in there.. as clicking repeatedly could lead to unexpected results.

    Something like:


    jQuery.fn.fadeSliderToggle = function(settings) {
    /* Damn you jQuery opacity:'toggle' that dosen't work!~!!!*/
    settings = jQuery.extend({
    speed:500,
    easing : "swing"
    }, settings)

    caller = this
    return caller.stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, settings.speed, settings.easing);};

  14. Strange things happen when you style your sliding DIV. Giving it a background color makes the margin above the DIV briefly flash with the background color. Giving it a border or any amount of padding adds an additional 20px of padding to the top and bottom of the DIV, and the aforementioned margin above the DIV disappears. This script only works well if the sliding DIV has no styling applied to it.

  15. Your script works fine on the home page I am creating but when i click through to a content page it doesnt work any more 🙁

    its a wordpress site so the header php etc is all the same

    I havent changed any of your code so I am at a loss to know whats wrong

  16. I love this slider, I absolutely love it to bits. When it slides up and down I feel so good. It amazes me that the sliding motion is so smooth and gentle. It almost tells you that there’s joy in life. When it slides up and then down, up and down , in a never ending motion that is mesmerizing and invigorating.

Comments are closed.