jQueryのスライドのdiv

Question

あなたはmove a cursor on some of products

私は1つの違いと同様の機能を持つ同じ効果を実行しようとしていたとき、私は、スライド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); 
    }); 
});