Javascript 设置html元素宽度的动画

如何创建一个函数来增加（减少）给定html元素的宽度？下面是我的尝试，但我认为这是非常糟糕的。如何改进代码

函数foo（elem，num）{ var i=0； 如果（！元素样式宽度）{ 设置超时（功能条（）{ 如果（i0）{ elem.style.width=i--+'%'； elem.innerHTML=i--； } 设置超时（baz，30）； }, 30); } }

div{
高度：25px；
宽度：25px；
背景：红色；
光标：指针；
}

0%

为什么不使用

$（函数（）{
$（'#myButton'）。在（'单击'，函数（）上）{
$（'#myDiv'）.addClass（'transition-class'）；
});
});

div{
宽度：100px；
高度：100px；
背景：红色；
-webkit过渡：宽度2s；/*适用于Safari 3.1到6.0*/
过渡：宽度2s；
}
div:悬停{
宽度：300px；
}
.过渡阶级{
宽度：500px；
高度：200px；
}
注意：此示例在Internet Explorer 9和早期版本中不起作用

将鼠标悬停在上面的div元素上，以查看过渡效果

点击我
需要做一些改进：


首先，您当前每秒跳过一个百分比，因为您在函数中一个接一个地执行了两次
i++
/
i--
（因此您将宽度设置为
0%
，并显示
1%
，然后将其设置为
2%
，并显示
3%
，等等）
其次，您可以使用
requestAnimationFrame
（对于较旧的浏览器，包括polyfill）来获得更好的性能
第三，您可以通过计算方向（
1
或
-1
，具体取决于您希望
i
增加还是减少）并仅使用一个
条
/
baz
函数，来重新构造代码，使其不会重复

以下是我对它的看法：


函数foo（elem，num）{
var initialWidth=elem.style.width；
变量i=初始宽度？数值：0；
变量方向=初始宽度？-1:1；
功能条（）{
elem.style.width=i+'%'；
elem.innerHTML=''+i；
i+=方向；
如果（i=0）
window.requestAnimationFrame（条形）；
}
window.requestAnimationFrame（条形）；
返回函数重置（）{
elem.style.width=初始宽度；
elem.innerHTML=''；
}
}
var=false，
复位1，复位2；
document.getElementsByClassName（'grower-parent'）[0]。onclick=function（）{
如果（！已设置动画）{
动画=真；
reset1=foo（document.getElementsByClassName（'grower-1'）[0]，50）；
reset2=foo（document.getElementsByClassName（'grower-2'）[0]，50）；
返回；
}
动画=假；
reset1（）；
reset2（）；
};
.grower-1，
.种植者-2{
显示：块；
背景颜色：蓝色；
高度：1米；
颜色：白色；
宽度：0；
}

除了能够使用库之外，这是一种非常有效的方法。另外，我会使用
setInterval
并在完成后清除它，而不是
setTimeout
，但这只是一个meNo。我忘了说，我需要本地JavaScript.No。只有本地JavaScript。没有CSS，没有Jquery。你可以做我用JS操作de DOM所做的一切。。唯一的区别是我在用CSS操作..太棒了！如何使第二次单击后的元素具有原始宽度？哪一次单击？单击时是否希望它们返回到原始宽度？（例如，当它们达到0%宽度时有点困难，因为没有任何东西可点击-可能更容易将点击事件放在父元素或按钮或类似的东西上。你可以记住之前的宽度值并重置它>你希望它们在点击时返回到其原始宽度吗？是的。Ionut Costica，对不起，我的英语）h、 但我需要这样做：第二次点击是必要的，因为兴趣显示在div中