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/fade in doesn't. It just slides in without the fade. Any ideas?

#myDiv {     display: none;     height: 110px;     position: absolute;     bottom: 0px; left: 0px; }  $('#anotherDiv').hover(function() {     $('#myDiv').stop(true, true).slideDown(slideDuration).fadeIn({ duration: slideDuration, queue: false }); }, function() {     $('#myDiv').stop(true, true).slideUp(slideDuration).fadeOut({ duration: slideDuration, queue: false }); }); 

Answer 1

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 2

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