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动画，如果是你想要的：

＆＃13;

#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;}

＆＃13;

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

＆＃13;

Answer 2

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

移动具有多个jquery动画实例的图像

2 个答案: