루프로 jquery 애니메이션을 얻는 방법

기본적으로 시차 웹 사이트에서 간단한 애니메이션이 발생합니다. 이미지의 첫 번째 그룹이 움직이면 (움직이는 여백을 통해 스윕 한 다음) TimeOut을 사용하여 이미지를 제거한 다음 두 번째 이미지 그룹에 대기시킵니다. 잘 작동, 그냥 루프해야합니다.루프로 jquery 애니메이션을 얻는 방법

$('#slide5').waypoint(function(event, direction) { 
    if (direction === 'down') { 

     function runIt() { 

      $('.img-promo').stop().animate({marginLeft: '30%'},{duration:750}) 

      $('.img-tour').stop().animate({marginLeft: '30%'},{duration:750}) 
      $('.img-distro').stop().animate({marginLeft: '30%'},{duration:750}) 

      $('.img-promo').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750}) 

      $('.img-tour').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750}) 
      $('.img-distro').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750}) 

      setTimeout(function() { 
       $(".img-promo").hide(); 
       $(".img-tour").hide(); 

       $(".img-distro").hide(); 

      }, 3900); 

      $('.img-album').delay(3800).stop().animate({marginLeft: '30%'},{duration:750}) 

      $('.img-mastering').delay(3800).stop().animate({marginLeft: '30%'},{duration:750}) 
      $('.img-event').delay(3800).stop().animate({marginLeft: '30%'},{duration:750}) 

      $('.img-album').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750}) 

      $('.img-mastering').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750}) 
      $('.img-event').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750}) 
     } 
     runIt(); 
    } 
    else { 
     $('.img-promo').animate({marginLeft: '-90%'},{duration:750}) 
     $('.img-tour').animate({marginLeft: '120%'},{duration:750}) 

     $('.img-distro').animate({marginLeft: '-90%'},{duration:750}) 
    } 
}

출처

2013-08-19 Ted Takeshi Doré

당신은 할 수있다 http://jsfiddle.net/ 샘플을 만드시겠습니까? –

왜 그것을 제거합니까? 왜 그냥 숨기지 않는거야? 요소를 제거하면 애니메이션을 반복하기가 더 어려워집니다. – putvande

http://jsfiddle.net/MELPQ/6/ –

당신은 당신이 처음 여기

로 이동 끝에 다음 애니메이션을로드하기 위해 각 애니메이션의 콜백 기능을 사용하기 위해 필요한 것은 jQuery를 의 샘플 http://api.jquery.com/animate/

$("#book").animate({ 
    opacity: 0.25, 
    left: "+=50", 
    height: "toggle" 
    }, 5000, function() { 
    // Animation complete. 
    });

출처

2013-08-19 09:56:15

루프로 jquery 애니메이션을 얻는 방법

답변

관련 문제