jQuery로 애니메이션하기, 일시 정지없이 부드럽게 애니메이션하기

세 개의 DIVS, #clouds-1, #clouds-2, #clouds-3이 있습니다. 각기 다른 구름의 배경이 있습니다. 나는 그들을 위아래로 움직이고 있지만, 원하는 효과를 얻을 수는 없습니다. 문제는 다음 함수로 갈 때 원하지 않는 1-2 초 정도의 애니메이션이 멈추고 mto가 천천히 움직이기를 원합니다.jQuery로 애니메이션하기, 일시 정지없이 부드럽게 애니메이션하기

<head> 
    <script type="text/javascript" src="js/jquery.spritely.js"></script> 
</head> 
    <div id="wrapper"> 
     <div id="cloud-01"></div> 
     <div id="cloud-02"></div> 
    </div>

자바 스크립트 :

이 http://www.spritely.net/

HTML에서 JS 다운로드 :

// Clouds - 1 
$(document).ready(function() { 
    function moveRight() { 
     $("div#clouds-1").animate({ 
      top:'-=24px', 
      right: '+=50px' 
     }, 8000, moveLeft); 
    } 

    function moveLeft() { 
     $("div#clouds-1").animate({ 
      top:'+=24px', 
      right: '-=50px' 
     }, 8000, moveRight); 
    } 

    moveRight(); 
}); 

// Clouds - 2 
$(document).ready(function() { 
    function moveRight() { 
     $("div#clouds-2").animate({ 
      top:'-=24px', 
      right:'-=80px' 
     }, 8000, moveLeft); 
    } 

    function moveLeft() { 
     $("div#clouds-2").animate({ 
      top:'+=24px', 
      right:'+=80px' 
     }, 8000, moveRight); 
    } 

    moveRight(); 
}); 

// Clouds - 3 
$(document).ready(function() { 
    function moveRight() { 
     $("div#clouds-3").animate({ 
      top:'+=24px', 
      right:'+=100px' 
     }, 8000, moveLeft); 
    } 

    function moveLeft() { 
     $("div#clouds-3").animate({ 
      top:'-=24px', 
      right:'-=100px' 
     }, 8000, moveRight); 
    } 

    moveRight(); 
});

출처

2013-07-12 Anonymous

피들이 좋을 것 .. – reyaner

이 하나의 시도 :

이

은 내가 지금까지 가지고 코드입니다 :

$(document).ready(function(){ 
     $('#ground').pan({fps: 30, speed: 3, dir: 'right'}); 
     $('#cloud-01').pan({fps: 30, speed: 3, dir: 'right'}); 

});

희망이 도움이 될 것입니다.

출처

2013-07-12 12:57:46

jQuery로 애니메이션하기, 일시 정지없이 부드럽게 애니메이션하기

답변

관련 문제