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()和fadeOut()（jQuery的动画队列将使第二个等待直到第一个完成），并在最后一个启动整个过程的完成函数像这样：

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

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

或者，如果你想让整个背景div消失，你可以使用：

fadeForever(".background");

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

Answer 3

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

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

我的div有一个fade课程，只是为了方便：

<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);

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

3 个答案: