Question

19

jQuery: Slidetoggle from bottom to top

rated 0 times [ 24] [ 5] / answers: 1 / hits: 55173 / 12 Years ago, fri, may 11, 2012, 12:00:00

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.

        });

    });

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

vanessag

Add To Favorites

Follow

Total Points: 170

Total Questions: 98

Total Answers: 88

Location: El Salvador

Member since Sun, Sep 12, 2021

3 Years ago

answered 12 Years ago tierney · Accepted Answer

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

    });

});