jQueryのフェードイン()フェードイン(上の他のCSS要素を動かします)

StackOverflow https://stackoverflow.com/questions/2814534

  •  26-09-2019
  •  | 
  •  

質問

私はちょうど私がホテルのために作成していますが、それは現在の計画に行かないのウェブサイトに行く基本的な画像ギャラリーを取得するには、いくつかのjQueryを学んできました。私は矢のでそれを持っているであろう画像を循環(まだありませんアニメーション)が、私は矢印は画像がホバーしたときにフェードインとしないときにフェードアウトが、これは何とかCSSをめちゃくちゃにされなければならないことを決定します。

矢印が開始呼び出すことにより、フェードアウト:$('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);

jQueryの準備()関数の開始時に

これは結構ですが、画像の上にあなたのホバーと矢印が右に画像がシフト、フェードインと私はなぜ知らないとき。私は左の矢印は、今、それはそれで上に押さなっている手段でフェージングが、矢印は次のCSS持っているのでそれができると仮定します:

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

万一相対的要素の通常の要素の位置を変更することができる?

あなたが大規模な(プレースホルダ)画像と彼ら画像の上だけでホバー、それを試してみる必要がある場合は矢印がフェードインする場合を飛び越え、彼らがフェードアウトするときのバックジャンプします。

すべてのアイデアは、なぜこれが起こっているのでしょうか?私はjQueryのnoobのだ。

ここではページへのリンクがある: BeanSheafホテル仮設スペース

あなたの時間をありがとう、

InfinitiFizz

役に立ちましたか?

解決

#imageContainerている必要がありますposition:relative

arrowLeftている必要があります:

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

相対的に配置要素があなたのレイアウトでスペースを取ります。あなたの矢印は、比較的、彼らが表示されたとき、彼らは周りのものをバンプ配置したので。

位置事するためには、これは絶対に配置する画像の必要性の「上」、アイテムが起こらないようにします。この手段は、彼らがレイアウトの流れには含まれていませんが、それの「上に」です。

絶対-配置項目が原点(0,0)のための基準点を必要とします。これらの項目は、そのラッパーを見て、彼らは彼らの原点を決定するために、第1の比較的-位置付け要素を見つけるまで、HTMLの木を登ります。いずれも存在しない場合、それは基準点として<body>を使用します。

私たちはposition:relativeimageContainerを追加しているので、コンテナは今、あなたは正確にtop:left:を使用して矢印を配置することができ、基準点になります。

他のヒント

fadeOut() の方法割り当てるためには、素子のnoneプロパティにdisplay
position位置付け要素によってラップabsoluteにターゲット要素のrelativeを変更してみてください。

  

.fadeOut()方法は、マッチした要素の不透明度をアニメーション化。不透明度が0に達すると要素は、もはやページのレイアウトに影響を与えるので、表示スタイルプロパティが、noneに設定されていない。
   - APIドキュメント

それは画像の周囲のハイパーリンクのように見えるが何であるか、それはフェードイン、右にすべてを推進している。代わりに、画像自体のそれにスタイルを適用してみます。

あなたはすでにそれを使用していない場合、私は放火犯を得ることをお勧めしたい、何かがはるかに容易に起こっている理由を判断するになります。

編集: 実際には単なるよりもです。 imageContainer上の位置を投げる、絶対ハイパーリンクの位置を行います。

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

position:relative

のための

1)#imageContainer

そのリンクのためのposition:absolutearrorLeft親のための2)arrowRight()とlefttopと一緒にプレイしてみます。

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

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top