jQueryのフェードイン()フェードイン(上の他のCSS要素を動かします)
質問
私はちょうど私がホテルのために作成していますが、それは現在の計画に行かないのウェブサイトに行く基本的な画像ギャラリーを取得するには、いくつかのjQueryを学んできました。私は矢のでそれを持っているであろう画像を循環(まだありませんアニメーション)が、私は矢印は画像がホバーしたときにフェードインとしないときにフェードアウトが、これは何とかCSSをめちゃくちゃにされなければならないことを決定します。
矢印が開始呼び出すことにより、フェードアウト:$('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);
これは結構ですが、画像の上にあなたのホバーと矢印が右に画像がシフト、フェードインと私はなぜ知らないとき。私は左の矢印は、今、それはそれで上に押さなっている手段でフェージングが、矢印は次の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:relative
にimageContainer
を追加しているので、コンテナは今、あなたは正確にtop:
とleft:
を使用して矢印を配置することができ、基準点になります。
他のヒント
それは画像の周囲のハイパーリンクのように見えるが何であるか、それはフェードイン、右にすべてを推進している。代わりに、画像自体のそれにスタイルを適用してみます。
あなたはすでにそれを使用していない場合、私は放火犯を得ることをお勧めしたい、何かがはるかに容易に起こっている理由を判断するになります。
編集: 実際には単なるよりもです。 imageContainer上の位置を投げる、絶対ハイパーリンクの位置を行います。
あなたはすべて間違って男をやって:)あなたはこれを実行する必要があります:
position:relative
のための 1)#imageContainer
そのリンクのためのposition:absolute
とarrorLeft
親のための2)arrowRight
()とleft
とtop
と一緒にプレイしてみます。
あなたがこれを実行した後、ページ上のものをジャンプしても問題はありません。)