Question

我知道这可能已经得到了解答，但我还没能找到一个非常适合我想做的事情。我想在2秒后用js让div滑到一边。这就是我现在所拥有的;

＆＃13;

setTimeout("slide()", 1000)

function slide() {

  var myElement = document.querySelector("#box");
  myElement.style.left = 200px;

  setTimeout("slide()", 2000)

};

＆＃13;

#box {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 300px;
  height: 300px;
  background: blue;
}

＆＃13;

<div id="box">box</div>

＆＃13;

我做错的任何事情或者回答这个问题的链接都将是一个很大的帮助！谢谢

Answer 1

你在哪里：

myElement.style.left = 200px;

应该是：

myElement.style.left = '200px';

还有：

setTimeout("slide()", 2000);

真的应该是这样：

setTimeout(slide, 2000);

Answer 2

setTimeout将函数作为其第一个参数，但是您传递一个字符串。即使它不是字符串，也会因为()

而失败

使用setTimeout的正确方法是这样的：

setTimeout(slide, 1000);

function slide() {

  var myElement = document.querySelector("#box");
  myElement.style.left = '200px'; // Fix this too!

  setTimeout(slide, 2000)

};

Answer 3

未正确使用setTimeout功能。使用样式字符串。

setTimeout(function(){slide();}, 1000);
function slide() {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(function(){slide();}, 2000);
}

或只是

setTimeout(slide, 1000);
function slide() {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(slide, 2000);
}

为什么要使用第一个选项？以这种方式传递参数：

setTimeout(function(){slide(2000);}, 1000);
function slide(delaytime) {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(function(){slide(delaytime);}, delaytime);
}

使用js制作div幻灯片

3 个答案: