непонятное событие
помогите пожалуйста понять почему на этой странице происходит событие 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);
}
//анимация левого меню - конец
|
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
}
});
|
| Часовой пояс GMT +3, время: 08:19. |