Divider的淡入淡出

Question

我在一個div內的div裏面有一些div。最外面的div是.major_data然後是.commitment_box，然後是子div，.commitment。這些承諾正處於褪色週期，所以一個​​和另一個fadeIn()。問題出在這裏，最後一個div是​​之後第一個沒有出現。欲瞭解更多的通關信息，請參閱fiddle。

JS：

function tick() { 
    var $obj = $(".major_data .commitment_box .commitment"); 
    $obj.first().delay(1000).fadeOut(function() { 
     $obj.first().insertAfter($obj.last()); 
     tick(); 
    }); 
} 
tick(); 

HTML：

<div class="major_data"> 
    <div class="commitment_box"> 
     <div class="commitment"> 
      <p>Alex:</p> 
      <p>He's works great.</p> 
     </div> 
     <div class="commitment"> 
      <p>Alex 1:</p> 
      <p>He's works great.</p> 
     </div> 
     <div class="commitment"> 
      <p>Alex 2:</p> 
      <p>He's works great.</p> 
     </div> 
     <div class="commitment"> 
      <p>Alex 3:</p> 
      <p>He's works great.</p> 
     </div> 
     <div class="commitment"> 
      <p>Alex 4:</p> 
      <p>He's works great.</p> 
     </div> 
    </div> 
</div> 

CSS：

.major_data .commitment_box { 
    text-align: center; 
    height: 40px; 
    overflow: hidden; 
} 
.major_data .commitment_box .commitment p { 
    display: inline-block; 
} 
.major_data .commitment_box .commitment p:first-child { 
    font-weight: bold; 
    margin-right: 20px; 
} 

可以在小提琴看清楚是個問題。在Alex 4...之後，第一個沒有出現。

Answer 1

您忘記了添加一個fadeIn()到第一個obj。所以在一個週期結束後，你隱藏了它，你所有的div被設置爲display:none。您的代碼：

function tick() { 
    var $obj = $(".major_data .commitment_box .commitment"); 
    $obj.first().fadeIn().delay(1000).fadeOut(function() { 
     $obj.first().insertAfter($obj.last()); 
     tick(); 
    }); 
} 
tick(); 

更新演示：http://jsfiddle.net/hungerpain/NMSpx/1/