JQuery: Slidetoggle from bottom to top

Question

I am using jQuery slidetoggle, and I am wondering if there is a way by which I can advance from below, wherever I look, I cannot find the answer, here is the code that I use:

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

Answer 1

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 in accordance with the update proposed 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(); }); });​ 

Answer 2

You can do this using a wrapper for the item you want to switch. Set the wrapper position to relative and the element position to switch to absolute, while the bottom property is 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 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

The simplest way would be to use jQuery UI for this, jQuery does not separately have a separate function for it. See here and here .

Another way is to make CSS animations using the animate function.