jquery - jQuery 幻灯片 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);
    });
});

​</p>