jquery - 使用 jQuery 如何无限期地淡入一个语句而不是另一个语句？

Question

我想无限期地淡出和淡入 3 个或更多语句。这是代码：

    <div class= "background">
    <h6>
    <div id="one">This is the first statement</div>
    <div id="two">This is the second statement</div>
    <div id="third">You get the point</div>
    </h6> 
    </div>

我的问题措辞错误：我想#two替换#one，#three替换#two，#one替换#three等等。是的，我确实到处找。Geez 很抱歉需要帮助。

Answer 1

setInterval(function(){
$('.background').fadeToggle('slow');
},1000);

更新

像这样的东西？

var k = ["#one","#two","#third"]
var cnt = 0;
setInterval(function(){
    $(k[cnt]).fadeToggle('slow').siblings().hide();
    cnt++;
if(cnt ==3){cnt = 0;}    
},2000);

演示在这里：http: //jsbin.com/urikah/1/edit

Answer 2

您可以一个接一个地使用fadeIn()and fadeOut()（jQuery的动画队列将使第二个等到第一个完成）在最后一个上使用完成功能，重新开始整个过程​​，如下所示：

function fadeForever(sel) {
    $(sel).fadeOut().fadeIn(function() {
        fadeForever(sel);
    });
}

fadeForever("#one, #two, #three");

或者，如果您希望整个背景 div 褪色，您可以使用：

fadeForever(".background");

当然，如果你想控制淡入淡出时间，你可以在fadeOut()and中添加一个时间参数。fadeIn()

Answer 3

演示：http: //jsbin.com/ubiqob/5/edit/

编辑：我更新了我的 jsbin 以更好地匹配您的示例...

fade为了方便起见，我给你的 div 上了一堂课：

<div class= "background">
   <h6>
      <div class="fade">This is the first statement</div>
      <div class="fade">This is the second statement</div>
      <div class="fade">You get the point</div>
   </h6> 
</div>

使用以下 CSS 类：

.fade {
   position: absolute;
   display: none;
}

最后是javascript代码：

var j = 0,
    n = ('.fade').length;
    $('.fade:first').fadeIn(1000);

function change() {  
    $('.fade:visible').fadeOut(1000, function() {
    j = j + 1;
    $($('.fade')[j%n]).fadeIn(1000);
  });
}

setInterval(change, 2000);