Не успевает срабатывать mouseenter/mouseleave
Добрый день!
Уважаемые знатоки, как сделать так чтобы при быстром перемещении мышки по элементам события mouseenter/mouseleave успевали срабатывать. Ниже приведен пример, если перемещать курсор по дивам медленно то все работает отлично, если быстро то события не успевают срабатывать и все глючит, заранее спасибо!
<!DOCTYPE html>
<html class="no-js" lang="en-US" >
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="themes/style.css" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script>
$(document).ready(
function()
{
$(".thumb").mouseenter(function(event)
{
$("#"+event.target.id).children(".img").animate({ opacity: 1 }, "slow");
$("#"+event.target.id).children(".init_img").fadeTo(0, 0);
})
$(".thumb").mouseleave(function(event)
{
$("#"+event.target.id).children(".img").fadeTo(0, 0);
$("#"+event.target.id).children(".init_img").fadeTo(0, 1);
})
}
);
</script>
</head>
<body>
<div class="thumb" id="project1">
<img src="thumbnails/01.jpg" class="img">
<img src="thumbnails/в01.jpg" class="init_img">
</div>
<div class="thumb" id="project2">
<img src="thumbnails/02.jpg" class="img">
<img src="thumbnails/в02.jpg" class="init_img">
</div>
<div class="thumb" id="project3">
<img src="thumbnails/03.jpg" class="img">
<img src="thumbnails/в03.jpg" class="init_img">
</div>
</body>
</html>
|
ushakofff64rus,
stop() |
рони,
что то не то ( |
ushakofff64rus,
самое то |
рони,
можно чуть чуть поподробней, из статьи не совсем понял ( точнее понял, но мне это не помогло ( |
Да, события срабатывают нормально, а вот анимация даже не начинается если быстро мышку переместить в область дива (
|
ushakofff64rus,
<!DOCTYPE html>
<html class="no-js" lang="en-US" >
<head>
<meta charset="UTF-8" />
<style type="text/css">
.thumb{
position: relative;
height: 100px;
}
.thumb img{
position: absolute;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script>
$(document).ready(
function()
{
$(".thumb").mouseenter(function(event)
{
$("img", this).stop(true,true);
$(".img", this).fadeTo(500, 1);
$(".init_img", this).fadeTo(500, 0);
})
.mouseleave(function(event)
{
$("img", this).stop(true,true);
$(".img", this).fadeTo(500, 0);
$(".init_img", this).fadeTo(500, 1);
})
}
);
</script>
</head>
<body>
<div class="thumb" id="project1">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg" class="img">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" class="init_img">
</div>
<div class="thumb" id="project2">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg" class="img">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" class="init_img">
</div>
<div class="thumb" id="project3">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg" class="img">
<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" class="init_img">
</div>
</body>
</html>
|
Все отлично работает, спасибо большое!
|
| Часовой пояс GMT +3, время: 02:50. |