jQuery slide div

Question

我喜欢幻灯片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);
    });
});

​