Question

我正在使用jQuery的slidetoggle，我想知道是否有一种方法可以让它从底部向上滑动，我看到的任何地方似乎无法找到答案，这里是我正在使用的代码：

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

Answer 1

你想实现像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();
});

根据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

您可以在要切换的元素上使用包装器来完成此操作。将包装器的位置设置为relative，并将元素的位置切换为绝对，并将bottom属性设置为零。

喜欢 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

最简单的方法是使用jQuery UI，仅jQuery没有单独的功能。请参阅here和here。

其他方法是使用animate函数进行CSS动画。

jQuery：从下到上滑动

4 个答案: