Question

我想要一个javascript函数来占用我提供的时间来执行。我知道setTimeOut()或setInterval()做了什么，我不是在寻找它们。

例如，我在top:0; left:0;处有一个div 我希望我的JS函数在left:50;处取div 从left:0;到left:50;获取div的时间将是我的时间。

请仅提供JavaScript解决方案。没有jQuery

由于

Answer 1

网络动画定义了实验Element.animate

document.getElementById("test").animate([
  { left: '0px' }, 
  { left: '50px' }
], {
  duration: 1000,
  fill: 'forwards'
});

#test {
  background-color: green;
  width: 100px;
  height: 100px;
  position: relative;
}

<div id="test"></div>

Answer 2

＆＃13;

var timeInMs = 500;

document.getElementById("test").style.transition = "all "+timeInMs+"ms";

＆＃13;

#test {
  background-color: green;
  width: 200px;
  height: 150px;
  margin-left: 0;
}

＆＃13;

<div id='test' onclick="this.style.marginLeft = '50px';"></div>

＆＃13;

我相信这是你正在寻找的，没有jQuery要求。

编辑：我根据以下评论起草了一个新版本。

＆＃13;

var timeInMs = 500;

document.querySelectorAll("#test *").forEach(function(a){
  a.style.transition = "all "+timeInMs+"ms";
  a.addEventListener("click",function(){
    this.style.margin = 0;
    this.style.opacity = 0;
    this.style.width = 0;
  });
});

＆＃13;

#test * {
  background-color: green;
  width: 200px;
  height: 150px;
  margin: 10px;
  display: inline-block;
}

#test {
  background-color: lightblue;
  display: inline-block;
}

＆＃13;

<div id="test">
  <div></div><div></div><div></div>
</div>

＆＃13;

如何在Javascript中设置函数的持续时间

2 个答案: