JQuery 애니메이션에서 타이밍을 올바르게 얻으려고 시도합니다.

Question

JQuery에 익숙하지 않은 기존 Rails 앱에서 작업합니다. 지금은 서로 다른 페이드의 타이밍을 수정하여 한 번에 모든 것이 아니라 순차적으로 들어 오도록하십시오. 지연, 창 시간 초과 등을 광범위하게 재구성 한 후에도 타이밍에 대한 인식 할 수없는 변화를 볼 수 없었습니다. 누구든지 도와 줄 수 있습니까? 다음은 원래 코드입니다.

감사합니다.

- content_for :scripts do 
    = javascript_include_tag 'jquery.easing.1.3', 'jquery.slides' 

:javascript 
    $(document).ready(function(){ 
     $('#splash-video').on('ended', function() { 
      $('#splash').hide(); 
      //window.setTimeout(function() { 
       $('#post-splash').show(); 
      //},500); 
      $('#slides').slides({ 
       play: 8000, 
       pause: 5000, 
       hoverPuase: true, 
       paginationClass: 'slides-pagination', 
       effect: 'fade', 
       fadeSpeed: 1200, 
       fadeEasing: 'easeOutQuad', 
       /*animationStart: function(current) { 
        //$('#slide-caption-' + (current+1)).fadeIn(2500); 
        console.log('animationStart on slide: ', current); 
       }, 
       animationComplete: function(current) { 
        window.setTimeout(function() { 
         $('#slide-caption-' + (current+1)).fadeIn(4000); 
         $('#slide-caption-' + (current)).fadeOut(1200); 
        },6800); 
       }*/ 
      }); 
     }); 
     /*window.setTimeout(function() { 
      $('#splash').hide(); 
     },4500); 
     window.setTimeout(function() { 
      $('#post-splash').show(); 
     },5500);*/ 
     //$('video,audio').mediaelementplayer({ alwaysShowControls: false }); 

     //$('.container.front-end h1').html($('.container.front-end h1').html().replace('&amp;', '<div class="h1-specialchar">&amp;</div>')); 
     /*$('#fade1').delay(700).fadeTo(700, 1, function() { 
      $('#fade2').fadeTo(700, 1, function() { 
       $('#fade3').removeClass('transparent').addClass('fadeInRight'); 
      }); 
     });*/ 
     //$("#fade2 p").each(function() { 
     // $(this).addClass('animated transparent'); 
     //}); 

     $("#fade2 p").addClass("animated"); 
     $('#fade1').delay(700).fadeTo(700, 1); 
     window.setTimeout(function() { 
      $("#fade2 p").each(function(index) { 
       $(this).delay(150*index).fadeTo(0, 1, function() { 
        $(this).addClass("fadeInDownFaster"); 
       }); 
      }); 
     },800); 
     window.setTimeout(function() { 
      $('#slides').removeClass('transparent').addClass('fadeInRight'); 
     },1800); 
    }); 

좀 더 가까워 보이나요?

답변 해 주셔서 감사합니다. 이게 맞는 것 같니? 적어도 거기에 도착?

$("#fade2 p").addClass("animated");' 
     window.setTimeout(function() { 
       $('#fade1').delay(200).fadeTo(500, 1, function() { 
        $("#fade2 p").each(function(index) { 
        $(this).delay(150*index).fadeTo(400, 1, function() { 
         $(this).addClass("fadeInDownFaster"); 
      }); 
     },800); 
     window.setTimeout(function() { 
      $('#slides').removeClass('transparent').addClass('fadeInRight'); 
     },1800); 
    }); 

Answer 1

당신은 통찰력이 예를 확인 후 http://jsfiddle.net/5NPDD/

$('#fade1').fadeTo(500, 0, function() { 
    $('#fade2').fadeTo(500, 0, function() { 

    }); 
});​