Grow your CSS skills. Land your dream job.

Last updated on:

Combine Slide and Fade Functions

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

Usage

$("#something").click(function() {
   $(this).slideFadeToggle();
});

Comments

  1. Permalink to comment#

    As if you read my thoughts. Thanks Chris :D

  2. This is beautiful! I can imagine using this effect on many things.

    Thanks!

  3. Any demo? I would like to see it if there is some.

  4. Steviss
    Permalink to comment#

    Thanks, m8! Your site is great! Found a lot of usefull tips!

  5. El garch Hicham
    Permalink to comment#

    Hello, is there any Demo to download, it doesn’t work for me.
    thx for the nice post.

  6. it’s nice , but I think it would be better if there was a demo page just like “Downloads”

  7. This is an awesome post Chris cheers.

  8. Excellent effect and very easy to modify!
    Thanks!

  9. zing
    Permalink to comment#

    Always nice to see a demo or example.

  10. JeyKeu
    Permalink to comment#

    Thanks @Chris.

    @Amir Monfared: there you go, http://jsfiddle.net/jeykeu/ejcn8/

  11. Permalink to comment#

    Thanks once again Chris. Over & over again I find what I’m looking for through your site.

  12. Kalrav Bhatnagar
    Permalink to comment#

    Thanks a lot Chris! Nice work

  13. Frederik
    Permalink to comment#

    Nice one, just in case someone else wants to use this:

    You might want to add padding: 'toggle' in order to prevent a jumpy animation when you’re using paddings on the element you want to toggle.

  14. Nithin

    Check out the working demo here

    Thanks,
    Nithin

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".