jQuery：从下到上滑动

我正在使用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

你想实现这样的目标吗？

HTML

 
 
 
 
​ 

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的例子 。

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

现场演示

 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没有单独的function。 看到这里和这里 。

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