Показать сообщение отдельно
  #1 (permalink)  
Старый 22.12.2012, 22: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);
			}			
			//анимация левого меню - конец
Ответить с цитированием