JavaScript -水平列表动画故障(IE8)

Question

所以当我尝试这个代码的时候：

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
}

关于这一点：

#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="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn10" src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn11" src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn1" src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn2" src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn3"  src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn4" src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn5" src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn6" src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn7" src="xxx.png" alt="???"/></a></li>
         <li><a><img id="btn8" src="xxx.png" alt="???"/></a></li>
      </ul>
   </div>
</div>

它确实向左动画，但有一个主要问题，每次图像离开smallNavContainer视图时，它都会跳到左侧，并在其所在位置留下较小的空白区域。

我已经尝试了jQuery动画，但它仍然给我同样的问题。

编辑-这是一把小提琴：http://jsfiddle.net/xReJT/9/

在IE8下，它在chrome下跳转，图像只是过早地消失

Answer 1

问题可能是您对边距进行了动画处理。在我看来，如果你使用两个嵌套的div容器和动画位置样式属性，比如top和left，动画效果会更直观。

外层有一个定义的宽度和高度，将overflow设置为隐藏，并且它的位置不能是静态的。内部，也不是静态定位的，是你的动画，通常使用top和left属性。这个内部div可以是每一种html的容器，然后可以是动画。

祝你好运…