jquery - 如何使用jQuery从下至上为div高度变化设置动画效果

无论如何，我可以动画从底部到顶部而不是从顶部到底部更改div框的高度吗？

该div框是绝对放置的，其底部的内容就像是窗帘一样。

最佳答案

为什么不使用slideUp()/slideDown():
因为如果注册了多个/快速的鼠标操作，则容易出错。

尝试演示，即使使用.stop()方法，您也无法获得如下所示的结果:

这是使用.animate()和高度切换的略微修改:
(只需要:position:absolute; bottom:0px; display:none;)
demo 1 (a nice way to do it)

$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({height: 'toggle'});
});

demo 2
另一种方法是:

var boxHeight = $('.box').innerHeight();  // get element height

$('.curtain').css({top:boxHeight}); // push 'curtain' down

$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({top: 0});  // animate to desired top distance
},function(){
  $(this).find('.curtain').stop().animate({top: boxHeight}); // and on mouseout - back down
});

关于jquery - 如何使用jQuery从下至上为div高度变化设置动画效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10687265/