在 JS setTimeout 运行后将图像移回

Question

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

Answer 1

我为此使用了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">

Answer 2

添加一个方向变量并在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>

在 JS setTimeout 运行后将图像移回

Move image back after JS setTimeout has ran

html

javascript

set

settimeout

intervals

在 JS setTimeout 运行 后将图像移回

Move image back after JS setTimeout has ran

html

javascript

set

settimeout

intervals

在 JS setTimeout 运行后将图像移回