0

所以当我尝试这段代码时：

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 animate，但它仍然给我同样的问题。

编辑 - 这是一个小提琴： http: //jsfiddle.net/xReJT/9/
在 IE8 下它会在 chrome 下跳转，图像会过早地消失

4

1 回答 1

1

问题可能是您为边距设置了动画。在我看来，如果您使用两个嵌套的 div 容器并对位置样式属性（如 top 和 left）进行动画处理，动画会更直观并且会产生更好的结果。

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

祝你好运……</p>

于 2012-10-09T13:23:45.887 回答