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

【问题标题】：moving an image with multiple instances of jquery animate使用多个 jquery animate 实例移动图像
【发布时间】：2017-10-12 16:12:13
【问题描述】：

我有一张图片，我需要同时在页面上来回上下移动。我不能让它们一起运行，单独它们工作正常。我想知道如何组合这些功能以使它们同时运行。

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

【问题讨论】：

如果我们能在 sn-p 或至少相关的 HTML 和 CSS 中看到这样的工作示例，将会有所帮助。除此之外，我建议使用 CSS 来执行此操作，因为它的性能会更好。

标签： jquery css jquery-animate css-animations

【解决方案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;}

&lt;div id="img"&gt;&lt;/div&gt;

【讨论】：

感谢 Mohit，它工作得很好，我只是将值转换为我需要的值。我不确定 css 或 jquery 是否更好，但这对我有用！

【解决方案2】：

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

【讨论】：