格动画从底部到顶部，而不是从上到下的jQuery

Question

我有一个div触发点击功能时动画播放至其height：

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
    }, 290, function() {  
    }); 
}); 

工作好为止。但我想从下到上对div进行动画处理，而不像在fiddle中看到的那样。

任何解决方案？

Answer 1

你可以把它放在一个容器中，并将其定位绝对?:

HTML：

<a href="#" id="menu">click me for menu</a> 
    <div id="cont"> 
    <div id="test"></div> 
</div> 

CSS：

#cont{ 
    height:500px; width:50px; position:relative; 
} 
#test{ 
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0; 
} 

的JavaScript：

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
     }, 290, function() { 
    }); 
}); 

Fiddle

编辑：为什么它的工作原理
我已经放在一个容器周围的菜单，并赋予它的风格position:relative。我认为什么是菜单（#test）已经给出这意味着你可以根据top，right，bottom和left它定位风格position:absolute，相对于包含元素（只要它具有比默认position等，因此我们给予集装箱一个relative的位置）。如果我们给元素一个top:0;left:0，元素的左上角将会粘到它父元素的左上角，同样，如果我们做了top:0;bottom:0，这个元素的左下角将会粘到它父元素的左下角。 Rambling，不是吗？因此，总而言之，#test被“卡住”在其父母的底部，因此它从底部开始动画。还有一点，容器的高度很重要！因为我们已经给出了绝对位置#test，所以它不会将容器推到高度，所以我们设置高度以确保#test从容器顶部加载500px。