fadeIn 모든 div의, 나는 다음과 같은 HTML을 가지고 각

하나씩fadeIn 모든 div의, 나는 다음과 같은 HTML을 가지고 각

<div class="post"> 
      <span class="fr">27.03.2012 - 14:07</span> 
      <div class="uzytkownik fl" ><img src="inc/img/awatar.jpg" alt="awatar"> 
       <h3>Michał Lach</h3> 
       <h4>Moderator</h4> 
     </div> 
     <!--koniec uzytkownik --> 
      <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
      <div class="clear"></div> 
     </div> 
     <!--koniec posta -->  
     <div class="post"> 
      <span class="fr">27.03.2012 - 18:52</span> 
      <div class="uzytkownik fl" ><img src="inc/img/awatar2.jpg" alt="awatar"> 
       <h3>Jan Kowalski</h3> 
       <h4>Użytkownik</h4> 
     </div> 
     <!--koniec uzytkownik --> 
      <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
      <div class="clear"></div> 
     </div> 
     <!--koniec posta -->  
     <div class="post"> 
      <span class="fr">28.03.2012 - 4:53</span> 
      <div class="uzytkownik fl" ><img src="inc/img/awatar.jpg" alt="awatar"> 
       <h3>Michał Lach</h3> 
       <h4>Moderator</h4> 
     </div> 
     <!--koniec uzytkownik --> 
      <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
      <div class="clear"></div> 
     </div> 
     <!--koniec posta -->  

     <div class="post"> 
      <span class="fr">29.03.2012 - 16:28</span> 
      <div class="uzytkownik fl" ><img src="inc/img/awatar2.jpg" alt="awatar"> 
       <h3>Michał Lach</h3> 
       <h4>Moderator</h4> 
     </div> 
     <!--koniec uzytkownik --> 
      <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div>

내 생각은보기에서 모든 div의를 숨기는 것입니다, 다음 fadeIn 그들 모두,하지만 난 단지에만 fadeIn 방법을 시작하려면 fadeIn 메소드가 이전 div에서 끝난 후에.

은 지금까지 나는 JQuery와에두고 완료 :이 작업을 나던 그러나

(function() { 
    var post = $('.post').hide(); 
    post.each(function(){ 
     $(this).fadeIn('slow'); 
     console.log('ok'); 
    }); 

})();

이 결과는 모든 div의 마녀 클래스 게시물, 동시에 다른 후하지를 fadeIn 것입니다.

어떤 도움이 필요합니까?

미리 감사드립니다.

출처

2012-07-06 Michał Lach

Paul Irish는 3 가지 훌륭한 방법을 제시했지만 FadeIn 대신 FadeOut을 사용했습니다. 나는 아래 링크를 언급했다. 당신은 더 나은 해결책을 얻지 못할 것입니다. http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

아래에 언급 된 세 가지 방법이 있으며 링크를 통해 가장 좋은 방법입니다.

자동 실행 콜백

(function hidenext(jq){ 
    jq.eq(0).fadeOut("fast", function(){ 
     (jq=jq.slice(1)).length && hidenext(jq); 
    }); 
})($('div#bodyContent a'))

출처

2012-07-06 10:27:36

감사합니다, 그것은 나를 위해 일한 임의의 jQuery 객체에

$('div.vehicle') .bind('showVehicle',function(e) {$(this).fadeIn('slow',function(){ $(this).next().length && $(this).next().trigger("showVehicle"); })}) .eq(0) .trigger('showVehicle');

자동 실행 콜백 체인을 유발

(function showVehicle(elem){ elem.fadeIn('slow',function(){ $(this).next().length && showVehicle($(this).next()); }); })($("div.vehicle:first"));

고객 이벤트 체인. 또한 기사를 읽어 주셔서 감사합니다. –

fadeIn 모든 div의, 나는 다음과 같은 HTML을 가지고 각

답변

관련 문제