Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.09.2013, 11:19
Новичок на форуме
Отправить личное сообщение для ushakofff64rus Посмотреть профиль Найти все сообщения от ushakofff64rus
 
Регистрация: 10.09.2013
Сообщений: 7

Не успевает срабатывать 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>

Последний раз редактировалось devote, 12.09.2013 в 13:48. Причина: insert run
Ответить с цитированием
  #2 (permalink)  
Старый 12.09.2013, 12:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

ushakofff64rus,
stop()
Ответить с цитированием
  #3 (permalink)  
Старый 12.09.2013, 13:06
Новичок на форуме
Отправить личное сообщение для ushakofff64rus Посмотреть профиль Найти все сообщения от ushakofff64rus
 
Регистрация: 10.09.2013
Сообщений: 7

рони,
что то не то (
Ответить с цитированием
  #4 (permalink)  
Старый 12.09.2013, 13:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

ushakofff64rus,
самое то
Ответить с цитированием
  #5 (permalink)  
Старый 12.09.2013, 13:17
Новичок на форуме
Отправить личное сообщение для ushakofff64rus Посмотреть профиль Найти все сообщения от ushakofff64rus
 
Регистрация: 10.09.2013
Сообщений: 7

рони,
можно чуть чуть поподробней, из статьи не совсем понял (
точнее понял, но мне это не помогло (

Последний раз редактировалось ushakofff64rus, 12.09.2013 в 13:21.
Ответить с цитированием
  #6 (permalink)  
Старый 12.09.2013, 13:46
Новичок на форуме
Отправить личное сообщение для ushakofff64rus Посмотреть профиль Найти все сообщения от ushakofff64rus
 
Регистрация: 10.09.2013
Сообщений: 7

Да, события срабатывают нормально, а вот анимация даже не начинается если быстро мышку переместить в область дива (
Ответить с цитированием
  #7 (permalink)  
Старый 12.09.2013, 14:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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>
Ответить с цитированием
  #8 (permalink)  
Старый 12.09.2013, 16:15
Новичок на форуме
Отправить личное сообщение для ushakofff64rus Посмотреть профиль Найти все сообщения от ushakofff64rus
 
Регистрация: 10.09.2013
Сообщений: 7

Все отлично работает, спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery after не успевает подгрузить внешний javascript? footniko Events/DOM/Window 0 14.03.2012 23:43
функция не успевает Sadist_dead Элементы интерфейса 22 02.10.2011 19:00
Почему Div не успевает за мышкой при быстром перемещии? PAMAC Общие вопросы Javascript 7 31.01.2011 13:32
onload - не успевает? bookworm jQuery 12 13.01.2011 21:38
slider не успевает за мышью goldmember Элементы интерфейса 8 24.02.2010 12:03