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 : 0 position: 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/

我怎样才能在jquery中以相反的方式制作动画？

2 个答案: