хотите, чтобы что-то произошло один раз на мышином компьютере, но произошло дважды

Question

У меня есть два изображения. Один из них имеет определенное место из того времени, а другой - то же самое местоположение сегодня. Я хочу, чтобы изображения менялись, когда вы наводили указатель мыши на один из них.

Мой HTML выглядит следующим образом:

<div id="popup" class="rounded-corners"> 
    <div class='close'></div> 
    <h3>my title</h3> 
    <img id="img_then" src="./images/path1.jpg" /> 
    <img id="img_now" src="./images/path2.jpg" /> 
</div> 

код JQuery выглядит следующим образом:

$("#popup img").one("mouseenter", function() { 
    if ($('#img_now').is(":visible")) { 
     $('#img_then').fadeIn(2000); 
     $("#img_now").fadeOut(2000); 
    } 
    else if ($('#img_then').is(":visible")) { 
     $('#img_then').fadeOut(2000); 
     $("#img_now").fadeIn(2000); 
    } 
}); 

Но что происходит, является то, что при наведении мыши, изображение переключается от старого к новому, то из новый для старого. Я пробовал несколько перестановок, включая добавление «return false»; но ничего не работает. У кого-нибудь есть какие-либо советы, пожалуйста?

Answer 1

Я предложил бы связывать 'mouseenter' обработчик на одной только '#popup' элемента.

Или добавить обертку вокруг изображения, и цель этой оболочки:

<div id="images"> 
     <img id="img_then" ...> 
     <img id="img_now" ...> 
    </div> 

$("#images").on("mouseenter", function(){ 
    if ($("#img_now").is(":visible")) { 
    $("#img_then").fadeIn(2000); 
    $("#img_now").fadeOut(2000); 
    } 
    else if ($("#img_then").is(":visible")) { 
    $("#img_then").fadeOut(2000); 
    $("#img_now").fadeIn(2000); 
    } 
}); 

Answer 2

ли это связать его с отображаемым в противном случае вы привязать его к обоим изображениям

$("#popup img:visible").one("mouseenter", function() { 

DEMO

Answer 3

Продолжительность для FadeIn/Затухание составляет две секунды. Может ли проблема заключаться в том, что вы получаете новое событие mouseenter, пока затухание все еще продолжается? Я думаю, что ваше условие о видимости элемента будет истинным только тогда, когда завершение затухания закончено.