图片标题在悬停时从顶部滑动

Question

我有一个标题在悬停时消失，然后在鼠标离开时向下滑动。如何更改此设置，以便标题从mouseenter上的图像顶部向下滑动，然后在mouseleave上再次向上滑动？

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

JQuery的

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

});

Answer 1

试试这个：

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