使用jquery动画元素的高度

Question

我有一些高度为％的条形图，但是当页面加载时我想要所有的条形图填满，然后减少到0.我知道如何填充for循环：

for(i = 1; i <= 100; i++)

但要让它回来

for(i = 100; i == 100; i--)

我只是不确定如何将它们组合在一起使变量变为100然后减小到0？

Answer 1

您正在寻找：

for(i = 100; i >= 0; i--)

但你可以这样做slideUp：

$('someElement')
    .hide()
    .slideDown(500, function () {
        $(this).slideUp(500);
    });

上面会像你想要的那样动画元素。如果您甚至想要制作更复杂的animate动画，那么该代码大致相当于以下内容：

$('someElement')
   .hide()
   .animate({ height: '100%' }, 500, function () {
        $(this).animate({ height: 0 }, 500);
    });

更新：以下是 jsFiddle 演示。

Answer 2

你可以在一个循环中完成所有这些：

for(var i = 0; i <= 200; i++) {
    var height = (i <=100) ? i : 200 - i;
}

变量height将从0变为100，然后变回0。

Answer 3

我认为jQuery animate正是您所寻找的。结果类似于this。

Answer 4

第二个应该是：

for(i = 100; i >= 0; i--)

Answer 5

这个怎么样：

for(i = 100; i >= 0; i--)

Answer 6

如果你试图设置一个对象的高度，那么我认为你想要jQuery的.animate()函数：

$('.bar-elements').animate({ height : '100%' }, 1500, function () {
    $(this).animate({ height : 0 }, 1500);
});

或者您可以使用已执行此操作的slideUp / slideDown函数：

$('.bar-elements').hide().slideDown(1500, function () {
    $(this).slideUp(1500);
});

.animate()的文档：http://api.jquery.com/animate

.slideUp()的文档：http://api.jquery.com/slideup

Answer 7

dude slideToggle。检查一下 - http://jsfiddle.net/6hp2G/。像老板一样工作