jquery延遲fadein與循環

我似乎無法得到一個fadeIn()delay工作。jquery延遲fadein與循環

我讀過關於間隔的負載，這並沒有幫助，也超時，但它目前沒有幫助。

我打電話下面的函數onclick，只是希望它循環用3秒鐘，然後延遲，如果再次呼籲從si-1開始（第一div）

的功能循環，但延遲是不同步與setTimeout在第一個循環後調用，它開始跳過div s，直到它只顯示最後的div並閃爍。

任何指針？

下面是代碼：

function runAnimation() { 
    hiAni(); // hides all si- div's 
    $('.si-1').delay(0).fadeIn(); 
    $('.si-2').delay(3000).fadeIn(); 
    $('.si-3').delay(6000).fadeIn(); 
    $('.si-4').delay(9000).fadeIn(); 
    $('.si-5').delay(12000).fadeIn(); 
    $('.si-6').delay(15000).fadeIn(); 
    $('.si-7').delay(18000).fadeIn(); 

    t = setTimeout(function(){runAnimation()},21000); 
}

它運行正常吧，如果你多點擊！ 這裏是我JS提琴http://jsfiddle.net/FvNYy/4/

來源

2014-02-24 gabs

你要等待每一個來完成接下來會發生過嗎？ – Dan

試試這個http://jsfiddle.net/aamir/LQvH2/ –

也許這樣的：

function runAnimation() { 
    hiAni(); // hides all si- div's 
    $('.si-1').delay(0).fadeIn(); 
    $('.si-2').delay(3000).fadeIn(); 
    $('.si-3').delay(6000).fadeIn(); 
    $('.si-4').delay(9000).fadeIn(); 
    $('.si-5').delay(12000).fadeIn(); 
    $('.si-6').delay(15000).fadeIn(); 
    $('.si-7').delay(18000).fadeIn(function(){ 
     // Using fadeIn complete callback to run the animation 
     t = setTimeout(function(){runAnimation()},100); 
    }); 
}

或者，也許這樣的事情（觸發下一個淡入每個元素）：

function runAnimation() { 
    hiAni(); // hides all si- div's 
    $('.si-1').fadeIn(function(){ 
     $('.si-2').fadeIn(function(){ 
      $('.si-3').fadeIn(function(){ 
       $('.si-4').fadeIn(function(){ 
        $('.si-5').fadeIn(function(){ 
         $('.si-6').fadeIn(function(){ 
          $('.si-7').fadeIn(function(){ 
           t = setTimeout(function(){runAnimation()},100); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}

來源

2014-02-24 17:39:59

這會工作，每個淡入在完成之前運行：

function runAnimation() { 

    hiAni(); // hides all si- div's 

    $('.si-1').fadeIn(3000, function(){ 
     $('.si-2').fadeIn(3000, function(){ 
      $('.si-3').fadeIn(3000, function(){ 
       $('.si-4').fadeIn(3000, function(){ 
        $('.si-5').fadeIn(3000, function(){ 
         $('.si-6').fadeIn(3000, function(){ 
          $('.si-7').fadeIn(3000, function(){ 
           t = setTimeout(function(){runAnimation()},21000); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}

來源

2014-02-24 17:44:48 Dan

會有這樣的工作嗎？我添加了hiAni函數來啓用點擊來重置動畫。隨意調整以適應您的需求。

jsfiddle

function hiAni() { 
    $('.main').children().stop().removeAttr('style'); 
} 
function runAnimation() { 
    $('.main').children().each(function() { 
     var t = $(this).index() * 3000; 
     $(this).delay(t).fadeIn(); 
    }); 
} 
$(document).ready(function() { 
    runAnimation(); 
    $('.main').children().on('click', function() { 
     hiAni(); 
     setTimeout(runAnimation, 3000); 
    }); 
});

來源

2014-02-24 20:43:38 Lazerblade

jquery延遲fadein與循環

回答

相關問題