jquery imageスライダーsetIntervalの問題

Question

これは私が最初にjqueryを教科書の外で使用したので、もちろんいくつか問題があります。私はここにjsfiddleにコードを追加しました：http://jsfiddle.net/b2Nq9/3/ 実際の画像でコードが実行されている場合を除いて、jsfiddle（もちろんjsfiddleでは画像はありませんがalt属性は回転しません）のように見えますが、最初の画像は問題ありません。 2番目と3番目の画像が回転して私のレイアウトがうまくなります。 Firebugで動作しているコードを見て、コードがCSSの表示プロパティを変更していることに気付きました。 1つ目の画像はdisplay：noneとdisplay：inlineの間で変化しますが、他の画像はdisplay：noneとdisplay：blockの間で変化します。 残りの画像を回転時にブロックするのではなく、インラインで表示するようにコードを調整する必要があるようです。私はこれを行う方法を知らず、感謝して助けになるでしょう。

Answer 1

あなたのレイアウトを維持するためには、幅と高さを追加したいと思いますあなたのコンテナdivに。 divに目に見える内容がなく、幅と高さが定義されていない場合は、ページ上にスペースを取らず、レイアウトが壊れる可能性があります。 （divが占めるスペースは本質的に「崩壊する」）。これは、イメージがまだロードされていない場合、または両方のイメージがdisplay noneに設定されている時間が短い場合、divには表示されるコンテンツが含まれないためです。

Answer 2

.show()は、次のCSSを要素：display : noneに設定します。

あなたの代わりに.css()機能を使用し、その後display : inlineを設定したいのであれば：

elements.first().css({ display : 'inline' }); 

をあなたが.fadeIn(1000)と同じ問題を持って、それはdisplay : block; opacity : 0だ設定後の要素の不透明度をアニメーション化します。代わりにこれを試してみてください：ここで

elements.eq(counter).css({ opacity : 0, display : 'inline' }).animate({ opacity : 1 }, 1000); 

はデモです：http://jsfiddle.net/b2Nq9/5/（あなたは要素がdisplay : noneとdisplay : inline切り替える見ることができます）