image caption slide from top on hover
<p>I have a caption that is fading in on hover and then sliding down when the mouse leaves. How can I change this so that the caption slides down from the top of the image on mouseenter and then slides up again on mouseleave?</p>

<pre><code>&lt;a href="link.html"&gt;
    &lt;div class='wrapper'&gt;
        &lt;img alt="" width="184" height="69" src="image.png" /&gt;
        &lt;div class="description"&gt;
            &lt;div class="description_content"&gt;Title&lt;br /&gt;&lt;small&gt;Description text&lt;/small&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/a&gt;
</code></pre>

<p>JQuery</p>

<pre><code>$(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').mouseenter(function(){    
    $(this).children('.description').stop().fadeTo(700, 1);  
}).mouseleave(function(){  
    $(this).children('.description').stop().slideUp(700);  
});

});
</code></pre>
