Question

首先，我想说下面这个函数是偶然的，我的意思是它的功能很奇怪：

function x (e,s,v){ // e =element, s = desired size of an element, v = speed 
    var div = document.getElementById(e),
        width = 0;
    for(var i =0; width<s; i++){

        if(i%v === 0){ 
        width = width+1;
        div.setAttribute('style', 'width:'+width+'px;');

        }else{
            width = width +0;
        }
    };

};

这个功能完美无缺，做我想做的事，但问题是当这个功能的工作完成时，宽度会立即改变。

详细

我想要一个元素的宽度平滑增加，增加一个＆＃39;由一个＆＃39; px。所以我做了这个功能。

有一个if语句，因为如果我没有把它放在那里那么那个元素的宽度会立刻增加。 if语句延迟添加两个像素之间的时间

但现在的问题是它是逐个添加像素，但在完成功能后宽度会立即增加。

例如，如果我在控制台x('aynElement', 500, 100)中写入，那么它会逐个添加像素，但当函数停止运行时，元素的宽度会立即增加

你可以在控制台中看到这个

链接到JsFiddle以获取完整代码

其次

问题是，这很奇怪。读完这个功能后，你一定觉得很奇怪。请任何人解释我这种古怪。

谢谢

Answer 1

我认为这样可以更好地解决问题（可能需要进行一次或其他调整，只需快速解决）：

<强> DEMO

setInterval(function(){
    grow('id',250) //set your parameters here
}, 100); //this is the speed - the lower the quicker


    var width = 1;
function grow(e,s) {

        document.getElementById('d1').style.width = width+"px";
        width++;
};

＆＃13;

setInterval(function(){
    grow('id',500)
}, 10);

    
    var width = 250;
function grow(e,s) {
        
        document.getElementById('d1').style.width = width+"px";
        width++;
};

＆＃13;

#d1{
		
		height: 100px;
		background-color: #000;
	}

＆＃13;

<body>
<div id="d1" ></div>
</body>

＆＃13;

Answer 2

您可以使用setTimeout()执行此操作。

function x(e, s, v) { // e =element, s = size of an element, v = speed 
  var div = document.getElementById(e),
    width = 0;
  for (var i = 0; i < (s - width); i++) {
    setTimeout(function() {
      div.setAttribute('style', 'width:' + width+++'px;');
    }, i * (1 / (v * 0.01)));
  };
};

x('d1', 400, 10)

#d1 {
  width: 100px;
  height: 100px;
  background-color: #aaa;
}

<body>
  <div id="d1" style="width:200px;"></div>
</body>

当宽度值动态变化时，我们如何增加元素的宽度？

详细

其次

2 个答案: