jquery一個接一個地加載div，沒有自動循環

Question

我需要在同一位置一個一個地顯示一些div。與this非常相似。

// First hide them all 
$("#fades div").hide(); 

function fades($div, cb) { 
    $div.fadeIn(100, function() { 
     $div.fadeOut(100, function() { 
      var $next = $div.next(); 
      if ($next.length > 0) { 
       fades($next, cb); 
      } 
      else { 
       // The last element has faded away, call the callback 
       cb(); 
      } 
     }); 
    }); 
} 

function startFading($firstDiv) { 
    fades($firstDiv, function() { 
     startFading($firstDiv); 
    }); 
} 

startFading($("#fades div:first-child")); 

但我需要最後一個div來顯示畢竟（沒有循環）。
如果訪問者需要再次看到循環，他們需要按下或單擊文本或按鈕。 謝謝

Answer 1

HTML代碼：

<div id="fades"> 
    <div>Hello #1</div> 
    <div>Hello #2</div> 
    <div>Hello #3</div> 
    <div>Hello #4</div> 
    <div>Hello #5</div> 
    <div>Hello #6</div> 
    <div>Hello #7</div> 
    <div>Hello #8</div> 
    <div>Hello #9</div> 
    <div>Hello #10</div> 
</div> 
<input id="looponclick" value='Click Me!' type="button"></input> 

JavaScript代碼：

function fades($div) { 
// First hide them all 
$("#fades div").hide(); 
$("#looponclick").hide(); 

$div.fadeIn(100, function() { 
    var $next = $div.next(); 
    // Fade out the current element only 
    // if you have next element 
    if ($next.length > 0) { 
     $div.fadeOut(100, function() { 
      fades($next); 
     }); 
    } 
    else { 
     $("#looponclick").show(); 
    } 
}); 
} 
fades($("#fades div:first-child")); 

$('#looponclick').click(function(){ 
    fades($("#fades div:first-child")); 
}); 

演示：

http://jsfiddle.net/chw3f/105/

Answer 2

最小的變化將是刪除else的情況下，這是重新啓動整個事情的代碼。然後移動if測試以包圍淡出代碼。

演示：http://jsfiddle.net/chw3f/95/

function fades($div, cb) { 
    $div.fadeIn(100, function() { 
     var $next = $div.next(); 
     if ($next.length > 0) { 
      $div.fadeOut(100, function() { 
       fades($next, cb);    
      }); 
     } 
    }); 
} 

（你可以通過刪除現在unsed cb收拾一下吧）

「如果訪客需要再一次看到了循環，他們需要請按或點擊文字或按鈕「

只需致電startFading()在問題上的按鈕點擊處理程序：http://jsfiddle.net/chw3f/101/

Answer 3

// First hide them all 
$("#fades div").hide(); 

function fades($div, cb) { 
    $div.fadeIn(100, function() { 
     if (currentDivCount < totalDivCount-1) { 
      $div.fadeOut(100, function() {    
       currentDivCount++; 
       var $next = $div.next(); 
       if ($next.length > 0) { 
        fades($next, cb); 
       } 
       else { 
        // The last element has faded away, call the callback 
        cb(); 
       } 
      }); 
     } 
    }); 
} 

function startFading($firstDiv) { 
    fades($firstDiv, function() { 
     startFading($firstDiv); 
    }); 
} 

var totalDivCount = $("#fades div").length; 
var currentDivCount = 0; 

startFading($("#fades div:first-child")); 

http://jsfiddle.net/chw3f/100/

Answer 4

使用if(!$next.length) return false;停止從最後的功能。並在點擊時調用你想要的功能。

function fades($div, cb) { 
    $div.fadeIn(100, function() { 
     var $next = $div.next(); //variable declaration is shifted here 
      if(!$next.length) return false; 
     $div.fadeOut(100, function() { 

      if ($next.length > 0) { 
       fades($next, cb); 
      } 
      else { 
       // The last element has faded away, call the callback 
       cb(); 
      } 
     }); 
    }); 
} 

demo