Переменная портит меню
 

Здравствуйте, написал простенькое меню, вот код:
JS:

var t,t2;
function show_menu(name)
{ 
    var objectm = document.getElementById(name+'-menu');
    var width = parseInt(objectm.style.width);
    var opacity = parseFloat(objectm.style.opacity);
	if(width <= 200) {
			clearTimeout(t2); 
                                  width += 2;
			objectm.style.width = width;
			if(opacity <= 0.9) {
			opacity += 0.01; 
                                  objectm.style.opacity = opacity;
			}
    t = setTimeout(arguments.callee,5);
			}
}


function hide_menu(name)
{ 
    var objectm = document.getElementById(name+'-menu');
    var width = parseInt(objectm.style.width);
    var opacity = parseFloat(objectm.style.opacity);
      if(width >= 0) {
	clearTimeout(t);
	width -= 2;
	objectm.style.width = width;
	  if(opacity >= 0) {
		opacity -= 0.01; 
                       objectm.style.opacity = opacity;
			}
    t2 = setTimeout(arguments.callee,5);
			}
}

HTML:

<div class="home" onmouseover="show_menu('main')" onmouseout="hide_menu('main')"></div>
<ul id="main-menu" onmouseover="show_menu('main')" onmouseout="hide_menu('main')" style="opacity:0; width: 0;" class="sub_helper_list">
<li>Главная</li>
</ul>

Проблема заключается в том что когда в том что когда в getElementById прописываешь id объекста полностью например 'main-menu' всё работает на ура, а как только прописываешь name+'-menu', работает но если когда работает норм то меню появляется по таймауту, то здесь когда наводишь мышью объект увеличивает на 2 пикселя ширину и 0.01 непрозрачность... То есть когда прописываешь id целиков всё идёт по таймауту, а когда с переменной то таймаут почеу-то не катит. Помогите пожалуйста, уже два часа не могу понять в чём дело...:blink:

Вот тут параметр name в функцию уже не передастся.

хм.. Даже об этом не думал... а каким образом тогда можно передать?

Ну я обычно делаю что-то вроде этого

function showMenu(name, callback) {
    var el = document.getElementById(name);
    // Ещё всякая инициализация
    (function() {
        if (/* Ещё продолжаем анимацию? */) {
            // Двигаем объект
            setTimeout(arguments.callee, 10);
        } else {
            // Закончили упражнение
            callback();
        }
    })();
}

Не совсем понятно, а что в выше описанном Вами примере представляет из себя функция callback()?

Функция вызываемая по окончании анимации

// Показываем меню
showMenu(name, function() {
    alert('Показали');
})

Извиняюсь если торможу (уже 13 часов за компом), но зачем мне это, мне же нужно передать переменную name, если callback нужен, то распишите пожалуйста поподробнее...

Это я вам на будущее сразу :) Щас может не надо, но потом обязательно понадобится. Как правило в любую асинхронную функцию передаётся callback, вызываемый по окончании её работы.

:) Понятно, спасибо, но возвращаясь к главному - ну так вы не в курсе как передать переменную использую arguments?

Я вам написал, как лучше сделать.

Может решение , которое я придумал покажется не оптимальным, но я сделал так:

function show_menu(name)
{       
     if(name=='foto'){objectm = document.getElementById('foto-menu');}
     if(name=='main'){objectm = document.getElementById('main-menu');}
    var width = parseInt(objectm.style.width);
    var opacity = parseFloat(objectm.style.opacity);
			if(width <= 200) {
			clearTimeout(t2);  //очищение таймаута hide
      width += 2;
			objectm.style.width = width;
			if(opacity <= 0.9) {
			opacity += 0.01; 
      objectm.style.opacity = opacity;
			}
			t = setTimeout(arguments.callee,5); // собственный таймаут 				
			}
}

Всё работает прекрасно.:dance: Kolyaj, за подсказку.

создай переменную вне функции и меняй её значение до вызова функции
Кстати, в IE6 opacity криво (а точнее ни как не) работает, рекомендую изменять это свойство через jQuery, с ним вроде бы пашет

А для IE есть свойство filter: alpha(opacity=от 1 до 100), я просто его здесь не стал показывать чтобы код меньше был, спасибо за совет, может и понадобиться, ещё не решил.:)

оно и в прежнем варианте неплохо работало ....малость подправить только

var t=[],t2=[];
function show_menu(name)
{   var objectm = document.getElementById(name+'-menu');
    var width = parseInt(objectm.style.width);
    var opacity = parseFloat(objectm.style.opacity);
	if(width <= 200) {
		   if(t2[name+'-menu'])	clearTimeout(t2[name+'-menu']);
                                  width += 2;
			objectm.style.width = width+"px";
			if(opacity <= 0.9) {
			opacity += 0.01;
            objectm.style.opacity = opacity;
			}
    t[name+'-menu'] = setTimeout("show_menu('"+name+"')",5);
			}
}


function hide_menu(name)
{
    var objectm = document.getElementById(name+'-menu');
    var width = parseInt(objectm.style.width);
    var opacity = parseFloat(objectm.style.opacity);
      if(width >= 0) {
   if(t[name+'-menu'])	clearTimeout(t[name+'-menu']);
	width -= 2;
	objectm.style.width = width+"px";
	  if(opacity >= 0) {
		opacity -= 0.01;
                       objectm.style.opacity = opacity;
			}
    t2[name+'-menu'] = setTimeout("hide_menu('"+name+"')",5);
			}
}