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），动画会更直观并导致更好的结果。

外部的一个具有定义的宽度和高度，将溢出设置为隐藏，其位置不能是静态的。内部，也不是静态定位，是您动画的，通常使用顶部和左侧属性。这个内部div可以是各种html的容器，而不是动画。

祝你好运......

JavaScript - 水平列表动画故障（IE8）

1 个答案: