Using jQuery how do I fade in one statement over another indefinitely?

Question

I want to fade 3 or more statements out and in, indefinitely. Here is the code:

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

I worded the question wrong: I want #two to replace #one and #three to replace #two and #one to replace #three so on. And yeah i did look all over the place. Geez sorry for needing help.

Anton · Accepted Answer · 2013-01-15T08:40:00.050

0

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

UPDATE

Something like this?

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

Demo here : http://jsbin.com/urikah/1/edit

edited Jan 15 '13 at 08:40

answered Jan 15 '13 at 08:09

Anton

32,245
5
44
54

score 0 · Answer 2 · answered Jan 15 '13 at 08:09

0

You can use fadeIn() and fadeOut() one after the other (jQuery's animation queue will make the second one wait until the first is done) with a completion function on the last one that starts the whole process over again like this:

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

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

Or, if you want the whole background div to fade, you can just use:

fadeForever(".background");

You can, of course, add a timing argument to the fadeOut() and fadeIn() if you want to control the fade time.

answered Jan 15 '13 at 08:09

jfriend00

683,504
96
985
979

I want one div to replace another. Not all three to fade in and out together. I understand how I was confusing. Thanks a lot for trying. I appreciate it. – Squirrl Jan 15 '13 at 08:19
1

@Niko - unclear original question then. Must sleep, can't work on your question now. – jfriend00 Jan 15 '13 at 08:22

clement g · Answer 3 · 2013-01-15T08:57:12.570

Demo: http://jsbin.com/ubiqob/5/edit/

EDIT: I updated my jsbin to better match your example...

I had a fade class to your divs, just for convenience:

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

With the following CSS class:

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

And finally the javascript code:

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

Using jQuery how do I fade in one statement over another indefinitely?

3 Answers3