jquery - 使用多个 jquery animate 实例移动图像

Question

我有一张图片需要在页面上同时上下移动。我无法让它们全部同时运行，它们单独运行时运行良好。我想知道如何组合这些函数来让它们同时运行。

   var homeWide = $('.container').width(); 
   var width = (homeWide - "250");

   moveRight = function() {
        $('img.homeFish').stop(true,true).animate({left: width}, 5000, 
         moveLeft);
   };

      moveLeft = function() {
        $('img.homeFish').stop(true,true).animate({left: 0}, 5000, moveRight);
   };

   moveRight();


  function loop() {
    $('img.homeFish').animate({'top': '10'}, {
        duration: 1000, 
        complete: function() {
            $('img.homeFish').animate({top: 0}, {
                duration: 1000, 
                complete: loop});
    }});

}
loop();

Answer 1

一个只有 css 的动画，如果这是你想要的:

#img{
  animation: wave 5s linear alternate infinite;
  background-color: orange;
  height: 50px;
  width: 100px;
}

@keyframes wave{
  0%{ transform: translate(0vw, 0vh);}
  20%{ transform: translate(20vw, 100vh);}
  40%{ transform: translate(40vw, 0vh);}
  60%{ transform: translate(60vw, 100vh);}
  80%{ transform: translate(80vw, 0vh);}
  100%{ transform: translate(100vw, 100vh);}
}


.as-console-wrapper{display: none !important;}

<div id="img"></div>