jQuery animation (다른 선택자와 다른 액션)

저는 스크립팅과 jQuery에 특히 익숙하며, 제 질문에 대한 답변을 찾지 만 매우 어려웠습니다.jQuery animation (다른 선택자와 다른 액션)

사이트에 대해 플래시가 아닌 애니메이션 소개를 만들고 있습니다. 다음은 애니메이션 부분의 코드입니다 (일부는 있지만 나머지 부분은 이와 유사합니다). 필요한 것은 페이지를 새로 고치지 않고 완료된 후에이 애니메이션을 반복하는 방법을 찾는 것입니다. 도와주세요! 누군가가 나에게 팁을 줄 수 있다면 내가 루프에 애니메이션을 적용 할 필요가

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true}); 
    $('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true}); 

    //this list goes on, but i figured this is enough for example purposes 


}); 


$(function() { 
    $("#enter").delay(2000).animate({opacity:1.0}, { duration: 2000, queue: true }); 

    $("#enter").hover(highlight, highlight); 
      }); 

function highlight (evt) { 
    $("#enter").toggleClass("highlighted"); 
    } 

</script>

부품 # 개 pic0-g를 통해 $ pic0이다 .... 나는 대단히 감사하겠습니다. 하나의 함수에서 모든 애니메이션을 결합하는 방법을 찾으려고했지만 다른 선택자와 다른 동작을 결합하는 데 문제가 있습니다.

출처

2011-10-21 Katya

모든 애니메이션을 함수에 넣은 다음 마지막 애니메이션이 완료되면이를 호출합니다 (동일한 작업은 jQuery documentation for .queue()에서 수행됩니다). 이것은 다음과 같이 수행 할 수 있습니다.

function animateThings() { 
    $('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true}); 
    $('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true}); 
    $('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true}) 
    //more animations 
    $('selector-for-last-animation').delay(something).animate({name: value}, {duration: something, queue: true, complete: animateThings}); 
} 
animateThings();

출처

2011-10-21 20:52:10 Cokegod

Cokegod, 팁 주셔서 감사합니다. 그러나 모두 "변수 animateThings() {...........} animateThings();"는 변수를 먼저 정의하지 않으면 실행되지 않습니다. 애니메이션이 다른 셀렉터에서 수행되기 때문에 정의 할 var이 무엇인지 모르겠다 .... 제발 도와주세요? – Katya

아마도 setTimeout()을 사용하고 함수 호출에서 루프 할 부분을 넣기를 원할 것입니다.

예컨대 :

setTimeout(AnimationFunctionName(), 10000)

그런 다음 AnimationFunctionName()의 끝에서 다시의 setTimeout를 호출하고, 루프 것이다.

출처

2011-10-21 20:44:33

jQuery animation (다른 선택자와 다른 액션)

답변

관련 문제