amitabhaghosh197
1/6/2015 - 12:50 PM

rotating content

rotating content

<script>
  $elements = $('.rotating-content').find('p');
$elements.hide().first().show();
 
setInterval(function() {
   $elements.filter(':visible').fadeOut('slow', function() {
      $next = $(this).next();
      if ($next.length === 0) {
         $next = $elements.first();
      }
      $next.fadeIn('slow');
   });
}, 4000);
  
</script>

<div class="rotating-content">
   <p>This is a text with a <a href="#">link 1</a> and <a href="#">another link 1</a></p>
   <p>This is a text with a <a href="#">link 2</a> and <a href="#">another link 2</a></p>
   <p>This is a text with a <a href="#">link 3</a> and <a href="#">another link 3</a></p>
   <p>This is a text with a <a href="#">link 4</a> and <a href="#">another link 4</a></p>
</div>