jQuery fadein fadeout divs over set interval

Question

I want to fadeOut the first div in a collection and then fadeIn the next div. The fade in out would trigger at a set time. The number of items in the collection is 1 to n. Here is an example of the html;

<div class="contentPanel">
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is first content
         </div>
      </div>
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is second content
         </div>
      </div>
      <div class="content">
         <div style="border: solid 2px black; text-align: center">
            This is third content
         </div>
      </div>
   </div>

So on page load the first "content" class would be visible, after x amount of time, the current "content" would fadeout and the next "content" would fade in. When it got to the nth "content" it would start over, fadeout the nth "content" and fadein the first "content". This behavior would loop continuously.

Answer 1

Try using the Cycle Plugin:

$('.contentPanel').cycle();

Answer 2

You could do something pretty compact like this:

function fadeContent() {
  $(".content:hidden​​​​​​​​​​​​​​​​​​​​​​​:first").fadeIn(500).delay(2000).fadeOut(500, function​​​​​() {
      $(this).appendTo($(this).parent()); //stick current at the end
      fadeContent(); //loop
  });
}
fadeContent(); //kick it off the first time

You can see a working example with your exact markup here. This fades the first element in over 500ms, leaves it for 2000ms, fades it out over 500ms, puts the element at the end of the list, and fades in the first in the list, rinse, repeat. The only addition to this you need is CSS to initially hide them all, like this:

.contentPanel .content { display: none; }

Answer 3

Hi,

Nick, you did a very cool page to show the example. Thank you very much for that.

I have a problem though, I need only one image to fadeIn and out without stopping.

So I took your code and removed what I thought was not needed for my case. The problem is, the animation runs only once and disappears.

My code:

In the head tag I put this:

How do I add the code here????

I tried severl times with the enter code here button, but it doesn't display my code... //

My image has the class banner.

Can you please help me and tell me what am I doing wrong?

Thanks,

Sigal