Исчезновение/исчезновение бесконечного цикла

У меня есть самодельная «галерея» со стрелками «предыдущий» и «следующий». Теперь я хотел, чтобы стрелки исчезали в событии 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();
    }
}

Может быть, у вас есть идея.


jquery fadein fadeout
person Kornel B.    schedule 24.02.2013    source источник
comment
Вы можете вставить весь код? Я даже не могу получить navright, чтобы появиться на основе того, что было предоставлено.   -  person sjdaws    schedule 24.02.2013
comment
Создал jsFiddle — jsfiddle.net/DJDavid98/XV9D7   -  person SeinopSys    schedule 24.02.2013

Ответы (3)


arrow_upward
1
arrow_downward

НЕ используйте встроенный код 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

person SeinopSys    schedule 24.02.2013
comment
@Nenad .fadeIn() показывает элемент, вам не нужно вызывать его дважды. - person SeinopSys; 24.02.2013
comment
Нет, нет, наоборот. Скройте, затем закройте (покажите), чтобы увидеть всю анимацию. Переходы выглядят более стабильными при быстром наведении и снятии курсора. Не надо медленно. - person Nenad; 24.02.2013
comment
@Nenad Если вы чувствуете, что этот ответ можно улучшить, не стесняйтесь редактировать его. - person SeinopSys; 24.02.2013

arrow_upward
0
arrow_downward

я думаю, что перемещение 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>
person Sudhir Bastakoti    schedule 24.02.2013

arrow_upward
0
arrow_downward

Прежде всего, лучше использовать следующий код для прикрепления событий.

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

Попробуйте позвонить stopPropagation() по событиям.

Мы также можем использовать альтернативное событие, которое останавливает распространение по умолчанию, например, mouseenter, mouseleave или hover (out or over).

person Pushpendra    schedule 24.02.2013