jQuery slide div

Question

当你move a cursor on some of products

时，我喜欢幻灯片jQuery效果

我试图用相似的功能做同样的效果，只有一个区别 - 当我在框上移动光标时，我想用信息显示新的DIV（这对我有用），但我想将它显示为从下到上的幻灯片，与链接地址完全相同。

$('div.box_data').hover( function() {
  $(this).find('div.box_data_info').toggle();
});

如何添加幻灯片效果？

Answer 1

见http://jsfiddle.net/ePSdq/

HTML

<div class="box_data">
    <div class="box_data_info">
        <p> Loren ipsum....</p>
    </div>
</div>
​

CSS

.box_data{
 position:relative;
 height:200px;
 background-color:Red;
    overflow:hidden;
}
.box_data_info{
    position:absolute;
    bottom:-100px;
    height:80px;
    background-color:#000;
    color:#fff;
    padding:10px;
    width:100%;
}​

JS。

$(function(){$('div.box_data').hover( function() {
      $(this).find('div.box_data_info').stop().animate({bottom:0},500);
    },
    function() {
      $(this).find('div.box_data_info').stop().animate({bottom: -100}, 200);
    });
});