JavaScript - Horizontal list animation glitch (IE8)

So when I attempt this code:\[code\]function doMove() { var left = $('#navContainer').css('margin-left'); left = parseInt(left) + 1; $('#navContainer').css('margin-left', left + 'px'); // show frame setTimeout(doMove,20); // call doMove() in 20 msec}\[/code\]On this:\[code\]#navlist li{ display: inline; list-style-type: none; padding-right: 0px; padding-left: 0px; margin-right: -2px; margin-left: -2px;}<div class="floatIt" id="smallNavContainer"> <div id="navContainer"> <ul id="navlist"> <li><a><img id="btn9" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn10" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn11" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn1" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn2" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn3" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn4" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn5" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn6" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn7" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> <li><a><img id="btn8" src="http://stackoverflow.com/questions/12799637/xxx.png" alt="???"/></a></li> </ul> </div></div>\[/code\]It does animate to the left with one main issue, each time an image leaves the view of smallNavContainer it jumps to the left and leaves a smaller chunk of blank space in it's place. I have tried jQuery animate and it still gives me the same issue.
 
Back
Top