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