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

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>

Answer 2

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