jquery hover оставляет шлейф
Добрый день,
прошу подсказать как избавиться от проблемы. есть строки, наводя мышку на которые срабатывает "высплывание" кнопки удаления строки, при убирании мышки - кнопка исчезает. вот оно: http://sdelaju.ru/hover/ фактически, сам код:
$('.str_block')
.on( "mouseenter", function() {
$(this).children(".record_del").animate({ opacity: 1 }, 500);
})
.on( "mouseleave", function() {
$(this).children(".record_del").css({opacity: 0});
});
при медленном проведении мыши всё ок, если дернешь быстро - остается шлейф непогашенных кнопок. причем, вешал в mouseleave console.log с номерами строк, должно отрабатывать. из-за чего такая проблема и как ее можно пофиксить? спасибо. |
$('.str_block')
.on( "mouseenter", function() {
$(this).children(".record_del").show('slow');
})
.on( "mouseleave", function() {
$(this).children(".record_del").hide('fast');
});
|
проблема в том, что ты ставишь задержку в 500мс.
в итоге когда мышка на элементе, то запускается счетчик, который в течение 500 мс делает свойство opacity = 1. если ты до этого времени мышку с элемента убираешь, то срабатывает opacity = 0, а счетчик еще не завершил свою работу. поэтому когда истекает 500 мс, присваивается opacity = 1 |
Цитата:
|
Спасибо за ответы, о стопе я и не вспомнил. решилось вот так:
$('.str_block')
.on( "mouseenter", function() {
$(this).children(".record_del").animate({ opacity: 1 }, 500);
})
.on( "mouseleave", function() {
$(this).children(".record_del").stop();
$(this).children(".record_del").css({opacity: 0});
});
|
| Часовой пояс GMT +3, время: 19:43. |