使用jQuery为元素的高度设置动画 [英] animating an element's height using jquery
问题描述
我有一些条以高度%填充,但是恰好在页面加载时,我希望所有条都填充然后减小到0.我知道如何用for循环填充它:>
I have some bars that are filled with a height %, but right when the page loads I would like all the bars to fill up and then decrease to 0. I know how to fill it up with a for loop:
for(i = 1; i <= 100; i++)
但是要让它回来
for(i = 100; i == 100; i--)
我只是不确定如何将它们放在一起以使变量变为100,然后又减小回零?
I'm just not sure how to put them together to make the variable i go to 100 then decrease back down to 0?
推荐答案
您在寻找:
for(i = 100; i >= 0; i--)
但是您可以这样做 slideUp
:
But you could just do this slideUp
:
$('someElement')
.hide()
.slideDown(500, function () {
$(this).slideUp(500);
});
以上内容将根据需要设置元素的动画.如果您甚至想做更复杂的 animate
动画,该代码大致等同于以下内容:
The above would animate the element like you want. That code equates to roughly the following, in case you even want to do more complicated animate
animations:
$('someElement')
.hide()
.animate({ height: '100%' }, 500, function () {
$(this).animate({ height: 0 }, 500);
});
更新:这是 jsFiddle 的演示
Update: Here is a jsFiddle demonstration.
这篇关于使用jQuery为元素的高度设置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!