Invalid argument. jquery-1.3.2.js, line 1061 character 4 - jquery error con IE7 y 8

[Un_Tico]

Hola a todos pues aqui vengo a pedir ayuda con javascript otra vez :P

El problema es este:

Quiero hacer una simple animacion de un menu como en acordeon que se despliegue a la derecha cuando cargue la pagina

para esto hice esto
html

Código HTML:

    <ul>
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
        <li>cuatro</li>
        <li>cinco</li>
	</ul> 

css

Código HTML:

ul{
	display:block;
	overflow:hidden;
	padding:0px;
	margin:0px;
}
ul li{
	list-style-type:none;
	float:left;
	background-color:#666;
	margin-right:10px;
	position:relative;
	top:0px;
	padding:5px 10px;
}

Luego el javascript:

jquery

Código:

jQuery(document).ready(function($){
	var menu_node 		= null;								
	var menu_lenght 	= $("ul").children().length;
	var menu_elements	= $("ul").children();
	var total_widths 	= 0;
	var speed 			= 1000;
	
	for(i=0;i<menu_lenght;i++){
		menu_node 		= menu_elements[i];
		total_widths 	+= $(menu_node).outerWidth();
		total_widths 	+= parseInt($(menu_node).css("margin-left"),10);
		total_widths 	+= parseInt($(menu_node).css("margin-right"),10);
		$(menu_node).css({"left":"-"+total_widths+"px","z-index":i});
	}
	for(i=0;i<menu_lenght;i++){
		menu_node = menu_elements[i];
		$(menu_node).animate({left:"0px"},speed);
	}
});

Pues el problema es con IE8,IE7 el cual manda este error

Invalid argument. jquery-1.3.2.js, line 1061 character 4

:S

he seguido el error con el debuger de IE8 y he llegado hasta aqui.

1661: elem[ name ] = value;

la variable name viene vacia.

He econtrado que lo que genera el error en mi codigo es esta linea

Código:

$(menu_node).css({"left":"-"+total_widths+"px","z-index":i});

Aqui siguieren una solucion pero no me funciono, si alguien ve como puedo cambiar mi code o arreglar jquery estaria genial

Gracias de antemano y saludos

[mayid]

z-index en jquery se escribe sin guion. Zindex (creo que la Z es mayuscula).

Proba eso.

[Un_Tico]

Gracias por contestar mayid pero ese no es el problema, el problema esta en el atributo left...

Ya lo habia probado solo con el left y es el left donde se genera el error!

[mayid]

Bueno, entonces se me complica:

total_widths += $(menu_node).outerWidth();
total_widths += parseInt($(menu_node).css("margin-left"),10);
total_widths += parseInt($(menu_node).css("margin-right"),10);

A esto no lo interpreto. Pero quizas te sirva saber que el plugin Dimensions ya esta incorporado en jquery y puede utilizarse para medir y colocar elementos en base a posiciones de otros:

http://docs.jquery.com/CSS // se llama positions

[Un_Tico]

Gracias por contestar nuevamente,

Te explico esas 3 lineas que Citas calculan el ancho mas el margen que tengan los elementos <li> de la lista asi para despues poder moverlos a el left y dejarlos totalmente ocultos

Ahora bien, si, el metodo position me devuelve la posicion del elemento, yo lo que necesito es un metodo para hacerle set a los left de los <li> de la lista porque es ahi exactamente donde se produce el error el IE, espero me haya explicado bien

Saludos...

[Un_Tico]

UPDATE:

He actualizado mi código para que sea mas legible...

Código:

jQuery.fn.extend({
	AnimateMenu:function(){
		var total_widths 	= 0;
		var speed 			= 1000;
		$(this).children().each(function(){
			total_widths 	+= $(this).outerWidth();
			total_widths 	+= parseInt($(this).css("margin-left"),10);
			total_widths 	+= parseInt($(this).css("margin-right"),10);
			$(this).css({left:"-"+(total_widths)+"px"});
		});
		$(this).children().each(function(){
			$(this).animate({left:"0px"},speed);									 
		});
	}						   
});
jQuery(document).ready(function($){
	$("ul").AnimateMenu();
});

Saludos...

[Un_Tico]

Código:

jQuery.fn.extend({
AnimateMenu:function(){
var total_widths = 0;
var speed = 1000;
$(this).children().each(function(){
total_widths += $(this).outerWidth();
if(!isNaN(parseInt($(this).css("margin-left"))))
total_widths += parseInt($(this).css("margin-left"),10); 
if(!isNaN(parseInt($(this).css("margin-right"))))
total_widths += parseInt($(this).css("margin-right"),10);
$(this).css({left:"-"+(total_widths)+"px"});
});
$(this).children().each(function(){
$(this).animate({left:"0px"},speed); 
});
} 
});

El problema estaba en que los atributos css de margin-left y margin right no estaban definidos, en firefox esto devuelve 0 pero en IE devuelve auto :S

Para evitar esto puse ese par de ifs para evitar que devuelva nah el fvck IE

Era tan simple que no lo pense, y yo ya estaba empezando a poner el traking para un ticket :P

SOLVED