Question

I like the slide jQuery effect, when you move a cursor on some of products

I am trying to do the same effect with the similar functionality with one difference – when I move a cursor on the box, I wanna display the new DIV with informations (that’s working me), but I would like to display it as a slide from bottom to top, exactly as is on the link address.

$('div.box_data').hover( function() {
  $(this).find('div.box_data_info').toggle();
});

How could I add the slide effect?

Answer 1

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

​