jQuery 幻灯片 div

Question

我喜欢jQuery的幻灯片效果，当你move a cursor on some of products

我正在尝试使用类似的功能实现相同的效果，但有一个区别 - 当我在框上移动光标时，我想显示带有信息的新 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);
    });
});