JS setTimeout 运行后将图像移回答案

【问题标题】：Move image back after JS setTimeout has ranJS setTimeout 运行后将图像移回
【发布时间】：2020-08-08 15:29:08
【问题描述】：

我正在尝试更改图像的变换属性，使其在起始位置和函数更改的新位置之间来回摆动。它运行一次然后停留在那里，我假设它是因为我没有指定如何或何时返回。任何帮助表示赞赏。这是我的 JS 代码

function moveHands() {
var handLeft = document.getElementById("metalHand2");
var handRight = document.getElementById("metalHand");

handLeft.style.transform = "translateX(12px) scaleX(-1)";
handRight.style.transform = "translateX(12px)";

setTimeout(moveHands, 1283.42);

}

document.getElementById("playBtn").addEventListener("click", moveHands);

这是我的 HTML

<div id="flexBox2">
  <div id="picContainer">
    <img src="hand.jpg" alt="metal hand" id="metalHand">
  </div>
  <div id="picContainer2">
    <img src="hand.jpg" alt="metal hand" id="metalHand2">
  </div>
</div>

<input type="button" value="Play" id="playBtn">

【问题讨论】：

使用 css 过渡
请出示您的按钮代码playBtn
以什么方式？我只是错过了转换属性，还是您说用 setTimeout 函数替换它。还添加了按钮 ty

标签： javascript html set settimeout intervals

【解决方案1】：

添加一个方向变量并在 setInterval 中切换

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="flexBox2">
  <div id="picContainer">
    <img src="https://images.freeimages.com/images/small-previews/0df/powerlines-1-1389965.jpg" alt="metal hand" id="metalHand">
  </div>
  <div id="picContainer2">
    <img src="https://images.freeimages.com/images/small-previews/0df/powerlines-1-1389965.jpg" alt="metal hand" id="metalHand2">
  </div>
</div>

<button id="playBtn">Move It</button>
<script>
  var handLeft = document.getElementById("metalHand2");
  var handRight = document.getElementById("metalHand");
  direction = 1


  function rotator() {
    if (direction == 1) {
      handLeft.style.transform = "translateX(12px) scaleX(-1)";
      handRight.style.transform = "translateX(12px)";
      direction = 2
    } else if (direction == 2) {
      handLeft.style.transform = "translateX(-12px) scaleX(1)";
      handRight.style.transform = "translateX(-12px)";
      direction = 1
    }
  }

  function moveit() {
    setInterval(rotator, 1000);
  }
  document.getElementById("playBtn").addEventListener("click", moveit);
</script>

【讨论】：

啊，我明白了。这工作，谢谢！只是因为我很好奇，我将 setInterval 添加到 rotator 函数并看到它有效，但只有一次。为什么我需要将计时器和移动功能分开？
不需要分开，只要确保我们使用的是 setInterval() 而不是 setTimeout()

【解决方案2】：

我为此使用了 CSS 动画属性

animation: 2s moveit linear infinite;

这意味着线性动画运行线性，无限使动画连续循环

function moveHands() {
    $('#metalHand2').addClass("animating");
    $('#metalHand').addClass("animating");
};

document.getElementById("playBtn").addEventListener("click", moveHands);

#metalHand2.animating{
  animation: 2s moveit linear infinite;
}
#metalHand.animating{
  animation: 2s moveit linear infinite;
}
@keyframes moveit{
  from{
      transform:translateX(15px);
  }to{
    transform:translateX(0px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="flexBox2">
  <div id="picContainer">
    <img src="https://images.unsplash.com/photo-1547014751-009831e5bc73?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="metal hand" id="metalHand" width="100">
  </div>
  <div id="picContainer2">
    <img src="https://images.unsplash.com/photo-1546872863-e85d5c3e5159?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="metal hand" id="metalHand2" width="100">
  </div>
</div>

<input type="button" value="Play" id="playBtn">

【讨论】：

很遗憾，我对 JQuery 还不太了解，但感谢您的意见。
请检查我现在转换成 css @t_gravell
也欢迎你