jQuery 이미지 페이드 시퀀스?

Question

jQuery와 이미지 페이딩에 관한 질문이 있습니다. 이미지가 많아서 페이지를로드 할 때 순차적으로 전체 불투명도로 페이드하고 싶습니다. 내 HTML 코드는 다음과 같습니다.

<div class='mod'> 
    <img src='image-src' alt='' /> 
    <div class='mod-text'> 
    <h2>Title</h2> 
    <p>Caption</p></div> 
</div> 

<div class='mod'> 
    <img src='image-src' alt='' /> 
    <div class='mod-text'> 
    <h2>Title 2</h2> 
    <p>Caption 2</p></div> 
</div> 

각 이미지의 제목과 캡션이 서로 아래에 표시됩니다. 첫 번째 이미지를 먼저 페이드 처리하고 다음 이미지를 페이드 인하 고 싶습니다. 아무도 아이디어가 없습니까? jQuery에 대한 기본적인 지식을 가지고 있습니다. 감사합니다

Answer 1

이것은 아마도 당신이 구현해야 할 일이 아니며, jQuery Cycle Plugin을 확인하십시오.

Answer 2

이전 끝이 때 각각의 애니메이션을 대기 한 후 시작해야합니다 :

<img src="..." /> 
<img src="..." /> 
<img src="..." /> 
<img src="..." /> 

var animations = new Array(); 
// queue all 
$("img").each(function() { 
    animations.push($(this)); 
}); 

// start animating 
doAnimation(animations.shift()); 

function doAnimation(image) { 
    image.fadeIn("slow", function() { 
     // wait until animation is done and recurse if there are more animations 
     if(animations.length > 0) doAnimation(animations.shift()); 
    }); 
} 

Answer 3

또한 그렇게 (메모와 같은 이후의 각 이미지에 대한 효과를 지연시켜 순차적를 퇴색 수 나 ' 모든 이미지) 애니메이션을 시작하기 전에로드하기 위해 window.load을 사용하고 있습니다 :

$(window).load(function() { 

     var delay = 0; 

     $('img').each(function() { 
      $(this).delay(delay).fadeIn(); 
      delay += 150; 
     }); 

    }); 

이 각각이 완료 될 때까지 기다리고 반대로 애니메이션을 중복에 좋은 곳입니다. 다음과 같이 무작위로 지정할 수도 있습니다.

$(window).load(function() { 

     var delay = 0; 

     $('img').sort(function() { return (Math.round(Math.random()) - 0.5); }).each(function() { 
      $(this).delay(delay).fadeIn(600); 
      delay += 150; 
     }); 

    });