Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.12.2008, 07:49
Аватар для SashaBorandi
Интересующийся
Отправить личное сообщение для SashaBorandi Посмотреть профиль Найти все сообщения от SashaBorandi
 
Регистрация: 25.12.2008
Сообщений: 16

Цикличность анимация?
Ребята, возникла затруднительная ситуация для моего мозга..
Задача такая, имеется тег:

CSS:
#blablabla {
		width: 200px;
		height: 35px;
		position: fixed;
		right: -165px;
		bottom: 100px;
		background-color: #ffffff;
	}


HTML:
<div id="blablabla">text-text-text</div>


Нужно при наведении на этот тег мышкой, происходило анимация на 120px влево, и на оборот на 120px в право.

По идеи все работает:

$("#blablabla").bind("mouseenter",function(){
		$(this).animate({"width": "+=120px"}, "slow");
	}).bind("mouseleave",function(){
		$(this).animate({"width": "-=120px"}, "slow");
	});


Но если при выполнении анимации, быстро убрать а затем навести мышку, то анимация выполняется очередью... Сначало сдвинится влево, потом в право, затем опять влево.. вправо..

Вопрос заглючается в том как это избежать.. Как при начале выполнении анимация отключать mouseenter, mouseleave, а затем включать после выполнении анимации.. Или есть другие способы..?

PS: Находил одно решение http://vremenno.net/js/jquery-popup-bubbles/ но так и не смог понять... Там тоже автор решил эту проблему..
Ответить с цитированием
  #2 (permalink)  
Старый 25.12.2008, 09:20
Аватар для SashaBorandi
Интересующийся
Отправить личное сообщение для SashaBorandi Посмотреть профиль Найти все сообщения от SashaBorandi
 
Регистрация: 25.12.2008
Сообщений: 16

Вопрос сам же решил..

var hideDelayTimer = null;
	var flag = 0;
	$("#blablabla").bind("mouseenter",function() {
		if (hideDelayTimer) clearTimeout(hideDelayTimer);
		if (flag == 0) {
			flag = 1;
			$(this).animate({"width": "+=120px"}, "slow");
		} else {
			return;
		};
	}).bind("mouseleave",function(){
		if (hideDelayTimer) clearTimeout(hideDelayTimer);
		hideDelayTimer = setTimeout(function() {
		hideDelayTimer = null; 
		if (flag == 1) { 
			$("#blablabla").animate({"width": "-=120px"}, "slow", function() {
				flag = 0;
			 });
		} else {
			return;
		};
		}, 500);
	});

Последний раз редактировалось SashaBorandi, 25.12.2008 в 10:01.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
анимация текста Гость Общие вопросы Javascript 2 29.07.2008 09:41