2

ホテル用に作成しているWebサイトで基本的な画像ギャラリーを作成するためにjQueryを学んでいますが、現在は計画していません。矢印が画像を循環するようにしました（アニメーションはまだありません）が、画像がホバーされたときに矢印がフェードインし、そうでないときにフェードアウトする必要があると判断しましたが、これはどういうわけかCSSを台無しにしています.

以下を呼び出すと、矢印がフェードアウトし始めます。$('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);

jQuery ready() 関数の開始時。

これは問題ありませんが、画像にカーソルを合わせて矢印がフェードインすると、画像が右に移動し、その理由がわかりません. 左矢印がフェードインしているということは、左矢印が押し込まれていることを意味しますが、矢印には次のcssがあるためだと思います。

position:relative;
top: -90px;
left: 25px;

相対要素は通常の要素の位置を変更できるべきですか?

試してみる必要がある場合は、大きな (プレースホルダー) 画像にカーソルを合わせるだけで、矢印がフェードインすると画像がジャンプし、フェードアウトすると画像が元に戻ります。

なぜこれが起こっているのですか？私はjQuery初心者です。

ページへのリンクは次のとおりです: BeanSheaf Hotel Temporary Space

御時間ありがとうございます、

インフィニティフィズ

4

4 に答える 4

2

メソッドが要素のプロパティにfadeOut()代入noneするためです。ターゲット要素を配置要素でラップする ように変更してみてください。 display
positionabsoluterelative

この.fadeOut()メソッドは、一致した要素の不透明度をアニメーション化します。opacity が 0 に達すると、display style プロパティが none に設定されるため、要素はページのレイアウトに影響しなくなります。
-- API ドキュメント

于 2010-05-11T21:29:26.927 に答える
1

画像を囲むハイパーリンクが、フェードイン時にすべてを右に押しているようです。画像自体ではなく、それにスタイルを適用してみてください。

まだ使用していない場合は、firebug を取得することをお勧めします。これにより、何かが起こっている理由をより簡単に判断できます。

編集：実際にはそれだけではありません。imageContainer に相対的な位置をスローし、ハイパーリンクの位置を絶対にします。

于 2010-05-11T21:26:39.460 に答える
1

#imageContainerすべきだった：position:relative

arrowLeftすべきだった：

position:absolute;
top:90px;
left:5px;

相対的に配置された要素は、レイアウトのスペースを占有します。矢印は相対的に配置されているため、表示されたときに物をぶつけます。

これが起こらないように物を配置するには、画像の「上」にあるアイテムを絶対に配置する必要があります。これは、それらがレイアウトの流れの一部ではなく、その「上」にあることを意味します。

絶対配置アイテムには、原点 (0,0) の基準点が必要です。これらのアイテムはラッパーを見て、起点を決定するための最初の相対的に配置された要素が見つかるまで、HTML ツリーを上に移動します。何もない場合は、<body>を基準点として使用します。

に追加position:relativeしているため、コンテナが基準点になり、 と を使用しimageContainerて矢印を正確に配置できます。top:left:

于 2010-05-11T21:27:43.267 に答える
1

あなたはすべて間違った男をやっています:)あなたはこれをする必要があります：

1)position:relativeの場合#imageContainer

2)position:absoluteと親 (リンクの場合)arrorLeftとarrowRightで遊んでみてleftくださいtop。

これを行った後、ページ上のものをジャンプしても問題はありません:)

于 2010-05-11T21:31:28.640 に答える