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

Mauretania

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

Berstine

Ok, now in the real-world: how would you prevent animations buildups on multiple hover/out actions? Please improve your answer. – Over

@Roko, There are many ways around to prevent the animation on multiple hover/out. I used hover event for demonstration. One can trigger the action on different event. It would be helpful for me if you can brief me what you meant by real-world (scenario may be)? Or you can definitely edit the demo/answer if I'm missing anything. – Berstine

I would simply not use slideToggle. – Over

As you can see, commented is the maximally improved example with slideToggle - to prevent fast-multiple-mouseovers and below is a nice example with .animate() and .stop() jsfiddle.net/mt5He I just wanted to say, that I would never give an example to someone with some code that I would never use. No bad feelings. Cheers! +1 – Over

ohh Kool... thanks :) You can edit this answer as well so in case if the jsfiddle link won't work the solution will be here :) – Berstine

njah, you can add an edit with an ...you can also: :) (P.S. long life to jsFiddle :D ) – Over

Answer 2

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

Inequitable

did you mean bottom property set to zero? – Subjection

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

Over

Answer 4

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.

Leadership

I meant to say there is no native function for that. Of course it can be done - jQueryUI is built on jQuery... not much wisdom there... I just wanted to give the simplest solution since he obviously doesn't want to do manual CSS animations. – Leadership

@Leadership I thought .animate() was a method. function animate(){ is something else. – Over