jQuery的幻燈片格

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