Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2012, 20:21
Новичок на форуме
Отправить личное сообщение для Trish Посмотреть профиль Найти все сообщения от Trish
 
Регистрация: 08.02.2012
Сообщений: 4

"Защита от дурака" при многократном наведении курсора мыши на картинку
Добрый день! Есть проблема: в большом контейнере(<div id="preview">) при наведении курсора мыши на определенную область, заданную координатами, плавно появляется другой контейнер-картинка (div id="expand"). Если курсор мыши убрать из этой области, контейнер "expand" плавно исчезает. Но если подвигать мышкой по этой области много раз - контейнер "expand" начинает столько же раз мигать. Как этого избежать?
Вот код:
Код:
$('#preview').live('mousemove',function(e){
       var x1 = 80; var x2 = 200; var y1 = 80; var y2 = 1000;
        if(((e.pageX>x1)&&(e.pageX<x2))&&((e.pageY>y1)&&(e.pageY<y2))){
            $('#expand').fadeIn(500);  		
        } else $('#expand').fadeOut(500);
Ответить с цитированием
  #2 (permalink)  
Старый 09.02.2012, 14:23
Аватар для bret
Кандидат Javascript-наук
Отправить личное сообщение для bret Посмотреть профиль Найти все сообщения от bret
 
Регистрация: 04.10.2008
Сообщений: 128

Попробуйте .stop()
__________________
я подыскиваю мозг... твой подойдёт
Ответить с цитированием
  #3 (permalink)  
Старый 09.02.2012, 15:51
Новичок на форуме
Отправить личное сообщение для Trish Посмотреть профиль Найти все сообщения от Trish
 
Регистрация: 08.02.2012
Сообщений: 4

Пробовала .stop(), но тогда эффект fadein/fadeout не работают...
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2012, 16:50
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Сообщение от Trish Посмотреть сообщение
Пробовала .stop(), но тогда эффект fadein/fadeout не работают...
тогда можно свой эфект fadein/fadeout сделать с помощью метода animate... так косяков не будет с анимацией

вот так у меня сделано, это с новой jquery 1.7 работает:
$('#menu').on({//в ul#menu
	mouseenter: function(){
		apanel.stop().css({display:'block', height:menu, top:3}).animate({opacity:1}, 300);//появляется элемент вторичного меню при наведении мыши
	},
	mouseleave: function(){
		apanel.stop().animate({opacity:0}, 250, function(){ $(this).css({display:'none'}); });//исчезает
	}
}, 'li.ap');//события мыши сробатывают конкретно на элементе li.ap
как это работает можно глянуть в меню на главной странице моего сайта
__________________
Нет предела совершенству...

Последний раз редактировалось sysya, 13.02.2012 в 19:01.
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2012, 19:07
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

есть ещё вариант, проверять, происходит ли анимация элемента... вот мой пост на эту тему: Как проверить анимируется в данный момент элемент или нет
__________________
Нет предела совершенству...
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Появление текста при наведении курсора на ссылку Александра Элементы интерфейса 1 11.05.2009 00:22
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31