使用 setTimeOut 循环扩展元素的宽度

Question

我正在尝试创建一个简单的 javascript 动画，它将元素的宽度从 0px 扩展到指定的宽度。虽然这对某些人来说可能是一个非常基本的问题，但我似乎无法弄清楚我做错了什么。而不是循环运行并根据需要扩展 div 我只能通过手动重复触发函数来扩展 div。

Fiddle

当前js代码：

  var el = document.getElementById('h');
var btn = document.getElementById('button1');
var oswidth = el.offsetWidth;
var target_width = 100;


btn.onclick = function grow() {
    var loop = setTimeout('grow(\'' + el + '\')', 20);
    if (oswidth < target_width) {
        oswidth += 5;
    } else {
        clearTimeout(loop);
    }
    el.style.width = oswidth + 'px';
 }

和往常一样，提前谢谢你！

Answer 1

您可以在setInterval

中调用grow函数

JS:

var el = document.getElementById('h');
  var btn = document.getElementById('button1');
  var oswidth = el.offsetWidth;
  var target_width = 100;


  function grow() {
      var loop = setTimeout('grow(\'' + el + '\')', 20);
      if (oswidth < target_width) {
          oswidth += 5;
      } else {
          clearTimeout(loop);
      }
      el.style.width = oswidth + 'px';
  }
  setInterval(grow, 1000);

演示：http://jsfiddle.net/lotusgodkk/jeq834de/1/

Answer 2

试试这个：

var el = document.getElementById('h');
var btn = document.getElementById('button1');
var oswidth = el.offsetWidth;
var target_width = 100;

btn.onclick = function grow() {
    if (oswidth < target_width) {
        oswidth += 5;
        el.style.width = oswidth + 'px';
        setTimeout(grow, 20);
    }
}

我会留给你来解决这些差异。

Answer 3

一共有三种解决方案。第一种是使用递归 setTimeout:

function grow(time) {
    if (oswidth < target_width) {
        oswidth += 5;
        el.style.width = oswidth + 'px';
        setTimeout(function() {grow(time);}, time);
    }
}

第二种是使用setInterval如K K的回答所述

第三个是我个人最喜欢的，使用transition css attribute。

Answer 4

试试这个 code.fiddle-https://jsfiddle.net/L8kLx7d2/

  var el = document.getElementById('h');
  var btn = document.getElementById('button1');
  var oswidth = el.offsetWidth;
  var target_width = 100;
  var loop;

  function grow() {
     if (oswidth < target_width) {
         oswidth += 5;
   } else {
      clearInterval(loop);
   }
   el.style.width = oswidth + 'px';
}
btn.onclick=function(){
 loop=setInterval(grow, 1000)};

使用 setTimeOut 循环扩展元素的宽度

Expand the width of an element with a setTimeOut loop

javascript

settimeout