jQuery: Slidetoggle from bottom to top

Question

I am using jQuery's slidetoggle, and I am wondering if there is a way I can make it slide up from the bottom, everywhere I look I cant seem to find the answer, here is the code I am using:

jQuery(document).ready(function(){ 
    jQuery(".product-pic").hover(function(){
        jQuery(this).find('.grid-add-cart').slideToggle('2000', "easeOutBack", function() {
            // Animation complete.
        });
    });
});

Answer 1

You can do it by using a wrapper on the element you want to toggle. Set the position of the wrapper to relative and the position of the element to toggle to absolute with the bottom property set to zero.

Like this jsFiddle example.

jQuery:

$("button").click(function() {
    $("p").slideToggle("slow");
});​

CSS:

p { 
    position:absolute;
    bottom:0;
    display:none;
    padding:0;
    margin:0;
}

div {
    position:relative;
    width:300px;
    height:100px;
}

Answer 2

The simplest way would be to use jQuery UI for that, jQuery alone doesn't have a separate function for it. See here and here.

Other way to go is by doing CSS animations using the animate function.

Answer 3

LIVE DEMO

jQuery(function($){

  $(".product-pic").hover(function( e ){
    var px  = e.type=="mouseenter"? 0 : 220 ;
    $(this).find('.grid-add-cart').stop().animate({top:px});
  });
});

Answer 4

Do you want to achieve something like this?

HTML

<div id="box">
    <div id="panel">
    </div>
</div>​

CSS

#box
{
    height: 100px;
    width:200px;
    position:relative;
    border: 1px solid #000;
}
#panel
{
    position:absolute;
    bottom:0px;
    width:200px;
    height:20px;
    border: 1px solid red;
    display:none;
}

JS

$("#box").hover(function(){
    $("#panel").slideToggle();
}, function(){
    $("#panel").slideToggle();
});​

OR as per Update suggested by Roko

var panelH = $('#panel').innerHeight();

$("#box").hover(function(){
    $("#panel").stop(1).show().height(0).animate({height: panelH},500);
}, function(){
    $("#panel").stop(1).animate({height: 0},500, function(){
      $(this).hide();  
    });
});​