Question

In the code below I’m trying to get divs to slide up into place on hover and then fade out after the mouse leaves. What is the easiest way of doing this?

$(window).load(function(){  
        $('div.description').each(function(){  
        $(this).css('opacity', 0);  
        $(this).css('width', $(this).siblings('img').width());  
        $(this).parent().css('width', $(this).siblings('img').width());  
        $(this).css('display', 'block');  
    });  

    $('div.wrapper').hover(function(){    
        $(this).children('.description').stop().fadeTo(700, 0.8);  
    },function(){  
        $(this).children('.description').stop().fadeTo(700, 0);  
    });  

});

Answer 1

$('div.wrapper').mouseenter(function(){    
    $(this).children('.description').stop().fadeTo(700, 0.8);  
}).mouseleave(function(){  
    $(this).children('.description').stop().slideUp(700);  
});

Fairly simple. No guarantee that code will work, but it has the right idea. You should use mouseenter and mouseleave because it doesn’t trigger every time you change elements within the wrapper div. It will track when the mouse enters the confines of the div then leaves them very nicely.

I can’t remember if this will be an issue, but I believe not. If your div is height:0 after slideUp() you may have to slideDown(0) then hide() before fadeTo().