Jquery. Проблема с Hover/Unhover
Здравствуйте, у меня есть необходимость делать видимым/скрывать определенный блок при наведении/отведении курсора мыши с ссылки(тег a).
Проблема вот в чем: если очень быстро провести курсор через ссылку, то блок появится, но не исчезнет. Вот код:
$('.desc a').hover(function (e) {
$('.dynamicBlock').fadeIn();
}, function () {
$('.dynamicBlock').fadeOut();
});
Кто-нибудь сталкивался с таким? Подскажите как решить. |
mazahaler,
$('.dynamicBlock').stop().fade... |
рони,
Неа, что-то не помогает. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.dynamicBlock {
display: none;
}
</style>
<script type='text/javascript'>
$(function(){
$('.desc a').hover(function (e) {
$('.dynamicBlock').fadeIn();
}, function () {
$('.dynamicBlock').fadeOut();
}
);
});
</script>
</head>
<body>
<div class='desc'>
<a href='#'>Test</a>
<div class='dynamicBlock'>
dynamicBlock
<div>
<div>
</body>
</html>
|
Попробуйте так (сам проверить не могу, т.к. у меня тоже всё исчезает и в консоль ничего не попадает - т.е. этот блок кода никогда не выполняется. Возможно от браузера зависит):
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="desc"><p>вот это <a href="#">ссылка</a></p></div>
<div class="dynamicBlock" style="display:none;">А это блок</div>
<script>
$('.desc a').hover(function (e) {
$('.dynamicBlock').finish().fadeIn().queue(function() {
if(
$('.desc a:hover').length === 0
&& $('.dynamicBlock').queue().length === 0
&& $('.dynamicBlock').css('display') !== 'none'
) {
console.log('аварийное скрытие...');
$('.dynamicBlock').fadeOut();
}
$(this).dequeue();
});
}, function () {
$('.dynamicBlock').finish().fadeOut();
});
</script>
|
| Часовой пояс GMT +3, время: 17:26. |