var $ul = $('#blog-roll'), roll = function() { $ul.find('li').first().slideUp('slow', function() { $(this).appendTo($(this).parent()).fadeIn(); }); }, anim = setInterval(roll, 3000); // Pause on hover... $ul.hover(function() { clearInterval(anim); }, function() { setInterval(roll, 3000); });
<ul id="blog-roll"> <li><a href="#">Alya Zahra 1</a></li> <li><a href="#">Alya Zahra 2</a></li> <li><a href="#">Alya Zahra 3</a></li> <li><a href="#">Alya Zahra 4</a></li> <li><a href="#">Alya Zahra 5</a></li> <li><a href="#">Alya Zahra 6</a></li> <li><a href="#">Alya Zahra 7</a></li> <li><a href="#">Alya Zahra 8</a></li> <li><a href="#">Alya Zahra 9</a></li> <li><a href="#">Alya Zahra 10</a></li> </ul>