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() { anim = setInterval(roll, 3000); });
<ul id="blog-roll"> <li><a href="#">Nama Blog 1</a></li> <li><a href="#">Nama Blog 2</a></li> <li><a href="#">Nama Blog 3</a></li> <li><a href="#">Nama Blog 4</a></li> <li><a href="#">Nama Blog 5</a></li> <li><a href="#">Nama Blog 6</a></li> <li><a href="#">Nama Blog 7</a></li> <li><a href="#">Nama Blog 8</a></li> <li><a href="#">Nama Blog 9</a></li> <li><a href="#">Nama Blog 10</a></li> <li><a href="#">Nama Blog 11</a></li> <li><a href="#">Nama Blog 12</a></li> </ul>