0

私が現在抱えている問題を解決する方法がわかりません。私はJavascriptとPHPを利用した画像ギャラリーを構築しています。基本的なdiv構造は、ギャラリー全体を含むdivがあり、1つは表示されている画像用で、もう1つは「前のボタン」を含むdivと「次のボタン」を含むdivです。

次/前のボタンは、画像コンテナdivの下部の左側/右側に配置されます（ギャラリーコンテナは相対位置に設定され、ボタンdivは絶対位置に設定されます）。デフォルトでは、jQueryを使用して非表示になり、画像コンテナdivにカーソルを合わせると表示されます。私が抱えている問題は、コンテナdivにカーソルを合わせてから矢印にカーソルを合わせると、トランジションエフェクトが再生され、HTML / CSS/JSを使用してそれを修正する方法がわかりません。divの現在の構造は

<div id="galleryContainer">
  <div id="imageContainer">
    <img src="img" />
  </div>
  <div id="leftArrow"></div>
  <div id="rightArrow"></div>
</div>

[次へ]/[前へ]ボタンにカーソルを合わせたときに、フェードイン/アウト効果がすべてバグのある動作を停止するようにするにはどうすればよいですか？divを確立するときに「onmouseover」リスナーを使用すること、jQueryリスナーを使用すること、ドライブの階層を変更しようとすることなど、さまざまな組み合わせを試しました。どんな助けでもいただければ幸いです！

編集：これが私がやろうとしていることの私の現在のjQueryコードです：

$(document).ready(function(){

$("#imageContainer").mouseover(function()
{
    $("#leftArrow").fadeIn();
    $("#rightArrow").fadeIn();
});

$("#galleryContainer").mouseout(function()
{
    $("#leftArrow").fadeOut();
    $("#rightArrow").fadeOut();
}); 
});

imageContainer内にボタンを配置しても、フェードのバグ/効果が発生します。

4

3 に答える 3

1

$.mouseleave と$mousenterを使用することをお勧めします。問題は、mouseoutイベントとmouseoverイベントがバブルすることです。次に、それらのイベントが#galleryContainerで発生したときに、その子孫のいずれかで発生したときに、ハンドラーが呼び出されます。

http://jsfiddle.net/z2Y8a/20/

$("#imageContainer").mouseenter(function() {
    $("#leftArrow").fadeIn();
    $("#rightArrow").fadeIn();
});

$("#galleryContainer").mouseleave(function() {
    $("#leftArrow").fadeOut();
    $("#rightArrow").fadeOut();
});
于 2012-05-11T21:39:35.600 に答える
0

これは私がコードを見ずにあなたの質問を解釈した方法です..私に知らせてください。
divに色を追加して、どちらがどこにあるかを確認できるようにしました。

jsFiddle： http: //jsfiddle.net/z2Y8a/19/

<div id="galleryContainer" style="width:200px;height:200px;background:green;">
    <div id="imageContainer" style="width:50px;height:100px;background:blue;">
        <div style="height:75px;">
            <img src="img" />
        </div>
        <div id="leftArrow" style="width:25px;height:25px;background:red;float:left;display:none;">L</div>
        <div id="rightArrow" style="width:25px;height:25px;background:yellow;float:left;display:none;">R</div>
    </div>
</div>​

<script>
    $("#imageContainer").hover( function()
    {
        $("#leftArrow").toggle();
        $("#rightArrow").toggle(); 
    });​
</script>

- 編集 - 

$("#galleryContainer").hover(function()
{
    $("#leftArrow").toggle();
    $("#rightArrow").toggle();
});
于 2012-05-11T20:41:46.883 に答える
0

矢印が画像コンテナ内にある場合はちらつきません。または、メインギャラリーコンテナにショーアローエフェクトを配置することもできます。基本的に、マウスが画像コンテナをレイブすると、マウスアウトがトリガーされます。私が「去る」と言うとき、私はコードの意味で意味します、あなたがそれを異なって配置しているので視覚的にそれは去りませんが、コードの意味では、あなたのマウスは画像コンテナを離れて矢印コンテナに入りました

于 2012-05-11T21:02:08.090 に答える