0

前と次の矢印が付いた自作の「ギャラリー」があります。今度は、マウスオーバーイベントで矢印をフェードインさせたかったのですが、矢印に触れると、無限のフェードイン/フェードアウトループが発生します。

<div id="stage" style="z-index:50;" onmouseover="shownavigation(1)" onmouseout="shownavigation(2)">
    <img id ="stageimg" name="phpimg" src="uploads/phpimg.png" onload="vertAlign(this)"/>
    <div id="navright" style="z-index: 2; overflow: hidden; display:none; position: absolute; left: 300px; top: 100px; width: 15px; height: 100px; text-align: center;"> 
        <a href="javascript:void(0)" onclick="navigate('r')"><img src="images/red-pfeil.png" alt="" width="17" height="100" align="texttop" /></a>
    </div>
</div>

function shownavigation(inout) {
    if(inout==1) {
        $("#navright").fadeIn();
    }
    else {
        $("#navright").fadeOut();
    }
}

多分あなたは考えを持っています。

4

3 に答える 3

1

インラインJavaScriptコードは使用しないでください。代わりにjQueryを使用してイベントをアタッチします。解決策は次のとおりです。

<div id="stage" style="z-index:50;">
    <img id ="stageimg" name="phpimg" src="uploads/phpimg.png" onload="vertAlign(this)"/>
    <div id="navright" style="z-index: 2; overflow: hidden; display:none; position: absolute; left: 300px; top: 100px; width: 15px; height: 100px; text-align: center;"> 
        <a href="javascript:void(0)" onclick="navigate('r')"><img src="images/red-pfeil.png" alt="" width="17" height="100" align="texttop" /></a>
    </div>
</div>

$(function () {
    $("#stage").hover(function(){
        $("#navright").stop().fadeIn("slow"); 
    }, function(){
        $("#navright").stop().fadeOut('slow');
    });
});

jsFiddle

于 2013-02-24T10:29:06.160 に答える
0

div#navrightメインのdivから移動すると、次のように機能するはずです。

<div id="stage" style="z-index:50;" onmouseover="shownavigation(1)" onmouseout="shownavigation(2)">

<img id ="stageimg" name="phpimg" src="uploads/phpimg.png" onload="vertAlign(this)"/>

</div>
//move it out
<div id="navright" style="z-index: 2; overflow: hidden; display:none; position: absolute; left: 300px; top: 100px; width: 15px; height: 100px; text-align: center;">     
  <a href="javascript:void(0)" onclick="navigate('r')">
     <img src="images/red-pfeil.png" alt="" width="17" height="100" align="texttop" />
  </a>
</div>
于 2013-02-24T10:14:05.357 に答える
0

まず最初に、次のコードを使用してイベントを添付することをお勧めします。

$("#div").hover(function(){
    $("#div").fadeIn("slow");
}, function(){
    $("#div").fadeOut();
});

stopPropagation()イベントを呼びかけてみてください。

、、、または（outまたはover）のようにmouseenter、デフォルトで伝播を停止する代替イベントを使用することもできます。mouseleavehover

于 2013-02-24T10:17:04.673 に答える