jQuery .fadeIn() not working as expected

Question

Hello

I have the code below for showing a submenu. I want the submenu to fade in on mouse-over, but it doesn't fade in - it just immediately shows the submenu:

jQuery("ul li").mouseover(function() {
    jQuery(this).fadeIn(1000, function () {
        jQuery(this).find('ul').css('right','0px').css('top','24px');
    });
}).mouseout(function(){
    jQuery(this).find('ul').css('right','-1000px');
});

thanks

Answer 1

First the problem, nothing's fading because you're trying to fade the <li> you're on, not the <ul> beneath it, and it's already visible. Then, you're moving it in the fade callback, when means it moves on screen after the fade completes (and that fade isn't happening anyway).

For the fixes: A few things here, first you'll probably want mouseeneter and mouseleave here (which don't fire when entering/leaving child elements). You can shorten it further by using .hover(), but since you're just positioning and hiding/showing, just do a hide/show, no reason to re-position. Also make sure you're fading the <ul> beneath where you are, not the <li> you're on. Here's the overall look:

jQuery("ul li ul").hide().css({ right: 0, top: 24 });
jQuery("ul li").hover(function() {
    jQuery(this).find('ul').fadeIn(1000); //possibly .children('ul') instead
}, function(){
    jQuery(this).find('ul').hide();
});

This uses the object overrload of .css() to shorten it a bit. But, you could just have this in CSS to start with:

ul li ul { right: 0; top: 24; display: none; }

Then you could just remove that first line: jQuery("ul li ul").hide().css({right:0,top:24});