jQuery：从底部向顶部滑动切换

Question

我正在使用jQuery的slidetoggle，我想知道是否有办法使其从底部向上滑动。无论我在哪里查找，似乎都找不到答案，以下是我正在使用的代码：

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

- onei0120

Answer 1

你是否想要实现类似于这种效果？

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

：JavaScript的缩写。

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

- Bongs

---

好的，现在进入实际应用场景：你如何防止多个鼠标悬停/移出操作导致动画堆积？请改进你的答案。 - Roko C. Buljan

@Roko，有很多方法可以防止多个hover/out上的动画。我在演示中使用了hover事件。一个人可以在不同的事件上触发动作。如果您能向我简要介绍一下您所说的真实世界（场景可能吗？）那对我会很有帮助。或者，如果我遗漏了任何内容，您肯定可以编辑演示/答案。 - Bongs

我会简单地不使用slideToggle。 - Roko C. Buljan

正如您所看到的，commented是使用slideToggle最大程度改进的示例-以防止快速多次鼠标悬停，下面是一个使用.animate()和.stop()的不错示例http://jsfiddle.net/mt5He/。我只想说，我永远不会给别人一个我**从不**使用的代码示例。没有不好的感觉。干杯！+1 - Roko C. Buljan

哦，很酷...谢谢 :) 你也可以编辑这个答案，以防jsfiddle链接不可用时，解决方案在这里 :) - Bongs

你可以添加一个带有编辑和*...你也可以:*的内容 :) (附注：jsFiddle万岁 :D ) - Roko C. Buljan

Answer 2

您可以使用一个包装器来切换所需元素。将包装器的位置设置为相对位置，要切换的元素的位置设置为绝对位置，并将底部属性设置为零。

像这样的jsFiddle示例。

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

- j08691

---

你的意思是将bottom属性设置为零吗？ - Kevin B

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

- Roko C. Buljan

Answer 4

最简单的方法是使用jQuery UI，因为jQuery本身没有单独的函数来实现它。请参见这里和这里。

另一种方法是使用animate函数进行CSS动画。

- Shomz

---

我本意是说没有原生函数可以做到那个。当然它是可以做到的——jQueryUI是基于jQuery构建的……并没有多少智慧可言……我只是想提供最简单的解决方案，因为他显然不想手动编写CSS动画。 - Shomz

@Shomz 我认为.animate()是一个方法。function animate(){是另一回事。 - Roko C. Buljan