使用jquery动画元素的高度

我有一些条形填充高度％，但正好在页面加载时我希望所有条形图填满然后减少到0.我知道如何用for循环填充它：

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

但要让它回来

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

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

Answer 1

您正在寻找：

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

但你可以这样做：

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

以上将为您想要的元素设置动画。 如果您甚至想要animate更复杂的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

第二个应该是：

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

Answer 4

这个怎么样：

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

Answer 5

如果你试图设置一个对象的高度，那么我认为你想要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 ： .animate()

.slideUp()文档： http ： .slideUp()

Answer 6

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

Answer 7

我认为jQuery动画是你正在寻找的。 结果是这样的 。