淡入/淡出无限循环

Question

我有一个带有上一个和下一个箭头的自制“画廊”。现在我想在onmouseover事件中使箭头fadein但是当我触摸箭头时我得到一个无尽的淡入/淡出循环。

<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();
    }
}

也许你有个主意。

Answer 1

NOT 使用内联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');
    });
});

Answer 2

我认为将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>

Answer 3

首先，使用以下代码附加事件会更好。

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

尝试在事件上调用stopPropagation()。

我们还可以使用默认停止传播的替代事件，例如mouseenter，mouseleave或hover（out或over）。