var hoveredElement = null; function tick() { $('.ticker').filter(function(item) { return !$(this).is(hoveredElement) }).each(function() { $(this).find('li:first').slideUp(function() { $ticker = $(this).closest('.ticker'); $(this).appendTo($ticker).slideDown(); }); }); } setInterval(tick, 5000); $(function() { $('.ticker').hover(function() { hoveredElement = $(this); }, function() { hoveredElement = null; }); });
<div> <ul class="ticker"> <li><span>News »</span> Post one : Name of your acricle..1</li> <li><span>News »</span> Post one : Name of your acricle..1</li> <li><span>News »</span> Post Two : Name of your acricle..2.</li> </ul> </div>
/*-------------------------------------------------------------- # News Ticker --------------------------------------------------------------*/ .ticker { height: 42px; overflow: hidden; line-height: 38px; } ul.ticker li span { background-color: #FF5656; border-right: 1px solid #fff color: #FFF; margin-right: 6px; font-size: 20px; padding: 10px 25px 10px 30px; } .ticker a:hover, .ticker li:hover { color: #D8D8D8; } .ticker a, .ticker li { color: #ffffff; font-size: 15px; background: #333; list-style: none; }