嘗試獲取正確的JQuery動畫的時機

使用現有的Rails應用程序，但不熟悉JQuery。現在試圖修改不同淡入淡出的時間，讓他們順序進入，而不是一次進入。即使在對延遲進行大量重新配置後，窗口超時等等，我仍然無法看到任何明顯的時間變化。誰能幫忙？這是原始代碼。嘗試獲取正確的JQuery動畫的時機

謝謝！

- 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); 
    });

來源

2012-09-28 Emeka Patrick

如果褪色添加的fadeto它會檢查後執行這個例子http://jsfiddle.net/5NPDD/

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

    }); 
});

來源

2012-09-28 01:53:21 user1289347

感謝您的洞察力回調。稍微修改代碼。有什麼想法嗎？ –

嘗試獲取正確的JQuery動畫的時機

回答

相關問題