Question

我是javascript的新手，并且在跳转到jQuery和所有其他库之前尝试学习基础知识，所以我可以理解正在发生的事情（或者甚至可以尝试）我试图运行带有for循环的简单动画，由onclick激活。有一个div（id = demo），4个CSS类的div（向上，向下，向左，向右，所有修改位置：相对），我想让它以方形运动移动。

<div id="demo" class="left" onclick="initElemAnim()"

CSS

#demo {
    width:100px;
    height:100px;
    background-color: red;
    -webkit-transition: 2s linear;
    position:relative;
    left: 0px;
    }

  #demo.right {
    position: relative;
    left: 200px;
  }

  #demo.left {
    position: relative;
    left:0px;
  }
  #demo.down {
    position: relative;
    top:200px;
  }
  #demo.up {
    position: relative;
    bottom:200px;
  }

JS

var elem = document.getElementById("demo");
  var useMe = ["right", "down", "left", "up"];
  var i = 0;

  function initElemAnim() {
    for (; i < 4; ) {
      elem.className = useMe[i];
      setTimeout(i+=1, 2000);
    }
}

链接到代码http://jsbin.com/holusevedo/1/watch?html,css,js,output

点击后会发生什么 - 红色方块消失。

有什么问题？感谢。

Answer 1

由于i是一个全局变量，你可以这样做：

  function initElemAnim() {
      if(i==3)i=0;
      elem.className = useMe[i++];
   }

setInterval(initElemAnim, 4000);

setTimeout只调用一次函数，而setInterval每次调用函数时都会遇到时间段。所以你可以循环4个类。

Answer 2

您需要为动画中的每个点设置机器人left和top，否则从“左”步骤到“向下”元素将对角线移动到左下角（因为.down没有left属性，所以浏览器会将top设置为200px，将left设置为0。

然后你的循环在同一时刻启动所有超时，因此所有类更改将在两秒后执行，并且元素上的唯一类名将来自最后完成的任何超时。您应该使用setInterval。

CSS

#demo.tl {
  left:0;
  top:0
}

#demo.tr {
  top:0;
  left:200px;
}

#demo.br {
  left:200px;
  top:200px;
}
#demo.bl {
  top:200px;
  left:0;
}

JS：

 var elem = document.getElementById("demo");
 var useMe = ["tr", "br", "bl", "tl"];
 var i = 0;

  function initElemAnim() {
    setInterval(function(){
      // this function executes every 2000ms, 
      // setting the class name then incrementing the counter
      // or going back to 0 if it reaches the last class name
      elem.className = useMe[i];
      i = i < 3 ? i+1 : 0;
    }, 2000);
}

http://jsbin.com/holusevedo/3/watch?html,css,js,output

Answer 3

将您的CSS更改为

 #demo {
width:100px;
height:100px;
background-color: red;
-webkit-transition: 1s linear;
position:relative;
margin-left: 0px;
}

#demo.right,#demo.down {
margin-left: 200px;
}

#demo.left {
margin-left:0px;
}
#demo.down,#demo.left {
margin-top:200px;
}
#demo.up {
margin-top:0px;

}

和你的脚本

var elem = document.getElementById("demo");
  var useMe = ["right", "down", "left", "up"];
  var interval;

  function initElemAnim() {
  var i = 0;
    elem.className = useMe[i];
    interval = setInterval(function(){ 
            if(i < 4){
            i = i + 1;
            elem.className = useMe[i];
            }
            else{
                clearInterval(interval);
            }
        }, 1000);
}

使用setInterval（）而不是setTimeout（）。

Javascript简单的动画循环

3 个答案: