Javascript jQuery：从下到上滑动切换

jQuery: Slidetoggle from bottom to top

提问by onei0120

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 的 Slidetoggle，我想知道是否有办法让它从底部向上滑动，无论我看哪里，我似乎都找不到答案，这是我正在使用的代码：

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

回答by Bongs

Do you want to achieve something like this?

你想实现这样的目标吗？

HTML

HTML

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

CSS

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

JS

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

OR as per Update suggested by Roko

或根据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();  
    });
});?

回答by j08691

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.

像这个jsFiddle 示例。

jQuery:

jQuery：

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

CSS:

CSS：

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

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

回答by Roko C. Buljan

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

回答by Shomz

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

最简单的方法是为此使用 jQuery UI，jQuery 本身没有单独的功能。请参阅此处和此处。

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

另一种方法是使用animate函数制作CSS 动画。