Question

I am trying to apply some fancy looking UI stuff to my web application, and I want a menu that, slides down and fades in, or, slides up and fades out at the same time

I tried this…

if($('#Menu').css("display") == "none") {
    $('#Menu').slideDown(250).fadeIn(250);
} else {
    $('#Menu').slideUp(250).fadeOut(250);
}

…it didn’t work. Only one effect occurs…Can anyone explain if it is possible to chain together effects in this way, or suggest a workaround?

Answer 1

To acheive this you’ll want to use jQuery’s .animate() function. Something like this;

if ($('#Menu').css('opacity') == 1) {
    $('#Menu').animate({
        opacity: 0,
        height: '0'
    }, 500, function() {
        // animation complete
    });
} else {
    $('#Menu').animate({
        opacity: 1,
        height: '200px'
    }, 500, function() {
        // animation complete
    });
}​

I think you could possibly replace the height value with ‘toggle’ to avoid putting in specific values. However I’ve not used it personally so can’t be sure.

EDIT:
‘toggle’ seems to work fine: http://jsfiddle.net/RjESG/3/