jQuery: Slidetoggle from bottom to top

问题:

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

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

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

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

回答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.