jQuery的停止功能中的setInterval

後各Interval.I希望它從0jQuery的停止功能中的setInterval

var firstShow = function(){ 

      $("#i_can").delay(2000).fadeIn(300); 

      $("#me").delay(4000).fadeIn(300); 

      $("#horizons").delay(6000).fadeIn(300); 

       .....  

     } 

    firstShow() 
    var NewTextAgain = setInterval(firstShow,10000)

來源

2015-08-17 user4523851

它不清楚。 '從0開始'是什麼意思？ –

https://jsfiddle.net/5dvfa7ow/16/這個函數會一直重複，但在第六次時文本開始重疊。我怎樣才能管理這個？ – user4523851

你可以使用回調函數做這樣的事情，它會在完成所有效果之後再次觸發函數

$(document).ready(function() { 
 
    $("#i_can").hide(); 
 
    $("#me").hide(); 
 
    $("#horizons").hide(); 
 
    $("#team").hide(); 
 
    $("#grow").hide(); 
 
    $("#course").hide(); 
 
    $("#celebrate").hide(); 
 

 
    var i; 
 
    var test = function() { 
 
    i++; 
 
    if (i == 14) firstShow(); 
 
    } 
 

 
    var firstShow = function() { 
 
    i = 0; 
 
    $("#i_can").delay(2000).fadeIn(300, test); 
 
    $("#me").delay(4000).fadeIn(300, test); 
 
    $("#horizons").delay(6000).fadeIn(300, test); 
 
    $("#me").delay(4000).fadeOut(test); 
 
    $("#horizons").delay(2000).fadeOut(test); 
 
    $("#team").delay(10000).fadeIn(300, test); 
 
    $("#course").delay(12000).fadeIn(300, test); 
 
    $("#team").delay(4000).fadeOut(test); 
 
    $("#course").delay(2000).fadeOut(test); 
 
    $("#grow").delay(16000).fadeIn(300, test); 
 
    $("#celebrate").delay(18000).fadeIn(test); 
 
    $("#grow").delay(5200).fadeOut(test); 
 
    $("#celebrate").delay(3100).fadeOut(test); 
 
    $("#i_can").delay(19200).fadeOut(test); 
 
    } 
 
    firstShow(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="i_can" class="i_can">I can</h2> 
 
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="me">Challenge Myself</h2> 
 
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="horizons"> To Chart New Horizons</h2> 
 
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="team"> Challenge My Team</h2> 
 
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="course"> To Set New Courses</h2> 
 
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="grow">Grow With You</h2> 
 
<h2 style="text-align: center;visiblility:hidden;font-family: Titillium Web" id="celebrate">To Celebrate Success</h2>

來源

2015-08-17 14:27:07

我會使用這種方法，謝謝 – user4523851

@ user4523851：很高興幫助:) –

開始你是應該隱藏在每次迭代

var firstShow = function() { 
    $("#i_can, #me, #horizons").hide(); 
    $("#i_can").delay(2000).fadeIn(300); 
    $("#me").delay(4000).fadeIn(300); 
    $("#horizons").delay(6000).fadeIn(300); 
} 

firstShow(); 
var NewTextAgain = setInterval(firstShow, 10000);

元素如何停止firstShow的執行Working example

來源

2015-08-17 14:25:27

謝謝你的時間 – user4523851

jQuery的停止功能中的setInterval

回答

相關問題