jquery - 如何在 jquery 中以相反的方式制作动画？

Question

我正在使用 jquery 为垂直条设置动画，但它是从上到下的，而我需要从下到上。

这是酒吧的css：

.progress_bar_cal{
height:0px;
width:24px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url(../img/grow.jpg);
margin-right:1px;
margin-top:2px;
}

这是jQuery：

$('.progress_bar_cal').each(function(){
    var percent = $(this).attr('title');
    $(this).animate({height : percent},1000);   
}); 

关于如何使其工作的任何想法？

谢谢！

Answer 1

如果.progress_bar_cal在一个元素内，position: absolute你应该看到栏从下到上展开bottom : 0position: relative

Answer 2

如果您希望元素从底部打开，则需要将其绝对定位到元素的底部：

<div id="container">
    <div class="slideMe"></div>
</div>

样式如下：

#container {
    position: relative;
    height:   300px;
}
.slideMe {
    position: absolute;
    bottom:   0;
    display:  none;
}

小提琴：http: //jsfiddle.net/jonathansampson/nCGYD/