Функции jQuery mouseenter() и mouseleave() работают многократно

У меня есть картинка и div. Div скрыт (отображение: нет;). Я хочу показать div, когда мышь находится над изображением, и снова скрыть div, когда мышь не находится над изображением. Для этого я использую события mouseenter() и mouseleave(), но когда moue находится над изображением, обе функции работают повторно. Вот код, в котором я определяю функции:`

$("#pic").mouseenter(function(){
  $("#checkin").slideDown();
});
$("#pic").mouseleave(function(){
  $("#checkin").slideUp();
});

Я также пробовал метод наведения, но результат тот же.

$("#pic").hover(
  function(){
    $("#checkin").slideDown(200);
  },
  function(){
    $("#checkin").slideUp(200);
  }
);

В чем проблема, не могу понять.

Обновление: вот HTML-код

<tr><td valign='top' class='checkinpic'><img src='img.png' id='pic' height='100%'></td></tr>

...

<div id='checkin'>
You are not going to any activity this week.
</div>

jquery mouseenter mouseleave
person Baris Demirel    schedule 17.05.2014    source источник
comment
И div, вероятно, закрывает изображение, поэтому срабатывает событие mouseleave, затем оно скрывается, и срабатывает событие mouseenter. Общая проблема.   -  person adeneo    schedule 17.05.2014
comment
@Baris Demirel, ваш код отлично работает с функцией наведения jsbin.com/webec/1/edit.   -  person mohamedrias    schedule 17.05.2014
comment
@adaneo Да, это так. Я не подумал об этом. Тогда как я могу это сделать?   -  person Baris Demirel    schedule 17.05.2014

Ответы (3)


arrow_upward
7
arrow_downward

Я нашел решение. Когда я изменил элемент, который работает с событием mouseleave, он сработал:

var block = false;
$("#pic").mouseenter(function(){
if(!block) {
    block = true;
    $("#toggleDiv").slideDown(400, function(){
        block = false;
    });
}
});
$("#pic").mouseleave(function(){
if(!block) {
    block = true;
    $("#toggleDiv").slideUp(400, function(){
        block = false;
    });
}
});

Спасибо за помощь.

Обновление: я заметил, что создание класса для изображения и элемента div и определение событий mouseenter и mouseleave класса — лучшее решение.

person Baris Demirel    schedule 17.05.2014

arrow_upward
3
arrow_downward

Может исправить что-то вроде этого:

var block = false;
$("#pic").mouseenter(function(){
    if(!block) {
        block = true;
        $("#toggleDiv").slideDown(400, function(){
            block = false;
        });
    }
});
$("#pic").mouseleave(function(){
    if(!block) {
        block = true;
        $("#toggleDiv").slideUp(400, function(){
            block = false;
        });
    }
});

http://jsfiddle.net/BnPJ4/

person Magistr_AVSH    schedule 17.05.2014
comment
Да, это решило проблему повторения, но теперь функция mouseleave не работает. Так что это работает один раз, пока не будет показан div. - person Baris Demirel; 17.05.2014

arrow_upward
0
arrow_downward

Вот решение, отредактированное из вашего кода, надеюсь, оно вам полностью поможет.

$("#pic").hover(function() {
    $("#checkin").slideDown(200);
},
function() {
    $("#checkin").slideUp(200);
});

нажмите на ссылку ниже, чтобы запустить код

http://jsfiddle.net/ByZ2z/5/

person Runny    schedule 17.05.2014
comment
Та же проблема сохраняется, я хочу, чтобы div отображался поверх изображения, поэтому он повторяется. - person Baris Demirel; 17.05.2014