Have Geek Brain

JQuery fadein fadeout divs at a given interval

I want to fadeOut the first div in the collection and then fadeIn in the next div. The fade will come out at the set time. The number of items in the collection is from 1 to n. Here's an example 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, when the page loads, the first "content" class will be visible, after x amount of time the current "content" will disappear and the next "content" will disappear. When it got to the nth "content", it will start, disappear the nth "content" and disappear into the first "content". This behavior will be cyclical.

+2


a source to share


2 answers


You can do something pretty compact:

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 here with your exact markup . This shrinks the first item by more than 500ms, leaves it for 2000ms, disappears within 500ms, puts the item at the end of the list and disappears into the first list, scrolls, repeats. The only addition to this you need is CSS to hide them all first, for example:

.contentPanel .content { display: none; }
+10


a source


Try using the Cycle Plugin :



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


a source






More articles:


All Articles