0

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

<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

Do NOT use inline JavaScript code. Attch events with jQuery instead. Here's a solution:

<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()事件。

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

于 2013-02-24T10:17:04.673 回答