使用 jquery 动画的多个实例移动图像

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

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

Answer 2

一个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>

使用 jquery 动画的多个实例移动图像

moving an image with multiple instances of jquery animate

css

jquery

css-animations

jquery-animate