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

试试这段代码。小提琴 - 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)};

Answer 2

您可以在grow

中调用setInterval功能

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 3

试试这个：

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 4

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

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

第二种是使用K {K的答案中所述的setInterval。

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

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

4 个答案: