jquery fade and slide simultaneously

Question

I\'m trying to both slide/fade a div simultaneously on a hover, then slide/fade it out at the end of the hover, using JQuery. The slide/fade out work properly, but the slide

Answer 1

The answer is that once either effects activate, it takes the inline css property "display=none" off of the element. These hide effects require the display property to be set to "none". So, just rearrange the order of methods and add a css-modifier in the chain between fade and slide.

$('#anotherDiv').hover(function() {
    $('#myDiv').stop(true, true).fadeIn({ duration: slideDuration, queue: false }).css('display', 'none').slideDown(slideDuration);    
}, function() {
    $('#myDiv').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).slideUp(slideDuration);
});

Answer 2

idk if this helps or not, but you can skip the slideUp and fadeIn shortcuts and just use animate:

http://jsfiddle.net/bZXjv/

$('#anotherDiv').hover(function() {
    $('#myDiv')
        .stop(true, true)
        .animate({
            height:"toggle",
            opacity:"toggle"
        },slideDuration);
});

Answer 3

Why not use jQuery to slide, and CSS transitions to fade, so they do not interfere with each other. Degrades nicely!

JS:

$('#myDiv').addClass("fadingOut");
$('#myDiv').slideUp(600,function(){
    $('#myDiv').removeClass("fadingOut");
});

CSS:

.fadingOut {
    transition:opacity 0.6s linear;
    opacity:0;
}