jQuery News Ticker: .remove() dom effect -

i'm trying make news ticker (without plug-in). use jquery ui's animate method make news move right left.

i'm removing first news (li) , attaching end of list (ul) , readjusting margin-left. not long white space every after cycle.

problem is... when .remove() first news, it's causing undesirable ui glitch (at least me). part:

leftmargin = leftmargin + $('.news-ticker-display li:first').width() - 2; $('.news-ticker-display li:first').remove(); 

here's jsfiddle link:

any help/suggestion/comment/alternative appreciated. sorry can't think constructive title this. lol

your code waiting fo next animate cycle update left margin, happens few frames later. need set (on same frame remove()) avoid visual glitches.

var leftmargin, scrollspeed; var playscroll = true;  scrollspeed = 5; leftmargin = 0;  function autoplay() {     if (playscroll) {         $('.news-ticker-display').animate({ marginleft: --leftmargin }, scrollspeed, "linear", function () {             var $first = $('.news-ticker-display li:first');             var width = $first.outerwidth();             if (leftmargin < -width) {                 $first.clone().appendto('.news-ticker-display ul');                 leftmargin = leftmargin + width;                 $first.remove();                 $(this).css({marginleft: --leftmargin});             }             autoplay();         });     } }  autoplay(); 

jsfiddle: https://jsfiddle.net/trueblueaussie/8djw6qen/8/

notes:

• you see have simplified code using temp vars. practice not repeat jquery selectors.
• you need use outerwidth(), rather try compensate border.
• i sped animation testing (taking long see glitches otherwise) :) set own value.
• you can reduce first selector using context. e.g. var $first = $('li:first', this);
• .first() traditionally faster using :first in selector, not matter here :)