Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.12.2012, 21:05
Кандидат Javascript-наук
Отправить личное сообщение для zlodiak Посмотреть профиль Найти все сообщения от zlodiak
 
Регистрация: 24.02.2012
Сообщений: 104

непонятное событие
помогите пожалуйста понять почему на этой странице происходит событие onmouseout при перемещении курсора по пунктам меню. в результате меню схлопывается(схлопывание по задумке должно происходить только когда курсор покидает область меню)

вот js-код

var menu = document.getElementById('left_menu');
			var content = document.getElementById('content');
			var running = false;
			
			menu.style.left = '-200px';
			
			//
			if (document.addEventListener) {
				addEvent = function(el, type, handler) {
					el.addEventListener(type, handler, false)
				};
			} else {
				addEvent = function(el, type, handler) {
					el.attachEvent("on" + type, handler)
				};
			};
			
			//анимация левого меню - начало
			addEvent(menu, "mouseover", function(e) {
					if(this.style.left == '-200px'){
						var element = this;
						var from = -200; // Начальная координата X
						var to = 0; // Конечная координата X
						var duration = 1000; // Длительность 
						var start = new Date().getTime(); // Время старта
						
					if(running != true){
						running = true;		

							setTimeout(function() {					
								var now = (new Date().getTime()) - start; // Текущее время
								var progress = now / duration; // Прогресс анимации

								var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);

								element.style.left = result + "px";

								if (progress < 1) // Если анимация не закончилась, продолжаем
									setTimeout(arguments.callee, 10);
							}, 10);
						
							running = false;
						}
					}
			});
			
			addEvent(menu, "mouseout", function(e) {
				if(this.style.left == '0px'){
					var element = this;
					var from = 0; // Начальная координата X
					var to = -200; // Конечная координата X
					var duration = 1000; // Длительность 
					var start = new Date().getTime(); // Время старта
					
					if(running != true){
						running = true;					

						setTimeout(function() {					
							var now = (new Date().getTime()) - start; 
							var progress = now / duration; 

							var result = (Math.round((to - from) * delta(progress>1?1:progress)) + from);

							element.style.left = result + "px";

							if (progress < 1) 
								setTimeout(arguments.callee, 10);
						}, 10);
						
						running = false;
					}						
				}
			});		

			function delta(progress) {
				 function d(progress) {
					for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
					   if (progress >= (7 - 4 * a) / 11)
						   return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
					}
				 }
				 return 1 - d(1 - progress);
			}			
			//анимация левого меню - конец
Ответить с цитированием
  #2 (permalink)  
Старый 23.12.2012, 00:30
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

zlodiak,
вот воспользуйтесь
function hover (opt) {
	
 opt.elem.onmouseover = ElemMouseAction;	 
 opt.elem.onmouseout = ElemMouseAction;
 	
 function ElemMouseAction (evt) {
  var related, Call;
  var e = evt || event;	 
 
	if(e.type == 'mouseover'){  
	  Call = opt.over; 
	  related = e.relatedTarget || e.fromElement;
	  
	} else {
	  Call = opt.out; 
	  related =  e.relatedTarget || e.toElement;
	  
		}
		
			
	while (related && related != this) {
		related = related.parentNode;
		} 
	  
	  if(related == this) return;
	 
	  Call();
	 
	 }	

	
	}
	
hover({
	elem:document.getElementById('#bla'),
	over:function () {// срабатывает при mouseover
		
		},
	out:function (){// срабатывает при mouseout
		
		}	
	
	});
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вставить в событие, указатель на объект, который получает это событие? Pacan228 Общие вопросы Javascript 2 04.07.2012 18:53
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 10:46
Отловить событие simple Events/DOM/Window 3 11.05.2011 13:20
событие onclick chelsea Общие вопросы Javascript 1 17.09.2010 10:31
какое событие возникает во время формирования html IT-AleX Events/DOM/Window 2 20.02.2009 15:13