移動jQuery動畫的多個實例的圖像

我有一個圖像，我需要在同一時間上下來回移動頁面。我無法讓他們全部一起運行，他們單獨工作得很好。我想知道如何組合這些功能來讓它們一次全部運行。移動jQuery動畫的多個實例的圖像

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();

來源

2017-10-12 jessica mele

這將有助於如果我們可以看到在這樣一個工作示例代碼片段，或者至少是關聯的HTML和CSS。除此之外，我建議使用CSS來做這件事，因爲它會表現得更好。 –

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

來源

2017-10-12 16:32:43

謝謝Mohit完美的工作，我只是改變了價值觀，以我需要的。我不確定css或jquery是否更好，但這對我有用！ –

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

來源

2017-10-12 16:18:43 mscdeveloper

移動jQuery動畫的多個實例的圖像

回答

相關問題