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>

それは1つの主要な問題で左にアニメーション化します。画像がsmallNavContainerのビューを離れるたびに、左にジャンプし、その場所に小さな空白のチャンクを残します。

jQuery animateを試しましたが、それでも同じ問題が発生します。

編集-ここにフィドルがあります：http：//jsfiddle.net/xReJT/9/
IE8の下では、クロムの下でジャンプし、画像が時期尚早に消えます

4

1 に答える 1

1

おそらく問題は、マージンをアニメートすることです。私の意見では、アニメーションはより直感的であり、2つのネストされたdivコンテナを使用し、上や左などの位置スタイルのプロパティをアニメーション化すると、より良い結果が得られます。

外側のものには定義された幅と高さがあり、オーバーフローを非表示に設定し、その位置は静的であってはなりません。静的に配置されていない内側は、アニメートするものであり、通常はtopプロパティとleftプロパティを使用します。この内部divは、アニメーション化できるあらゆる種類のhtmlのコンテナーになります。

頑張って…</p>

于 2012-10-09T13:23:45.887 に答える