Comunidad de diseño web y desarrollo en internet online

ayuda con menu animado con jquery

Citar            
MensajeEscrito el 01 Abr 2011 03:48 pm
Hola solicito ayuda por este medio por que ya no se me ocurre nada mas que hacerrr
el menu lo pueden ver en la pagina http://strong.mx/

Mi problema es en el menu del lado izquierdo. inicialmente solo se iluminaria la opcion donde este el puntero pero luego se me pidio que al cambiar entre opcion y opcion se desvaneciera lento y apareciera lento.

aunque no se ve que desaparesca lento, logre que apareciera lento. el problema se da cuando el usuario pasa rapidamente muchas veces el puntero sobre las opciones. es un caos visual

y no se como evitar que pase eso. no puedo reducir mas el tiempo de la animacion por que no se persiviria.

este menu esta echo con jquery el codigo es este:

Código :

  $(".men").each(function(i){
       $(this).mouseenter(function(){
            $(".mascara:eq("+i+")").fadeTo(150,1,function(){ //esto aparece el fondo negro del menu
                    //modifico css de .men para que paresca                    
            });
       });

       $(this).mouseout(function(){
             $(".mascara:eq("+i+")").fadeTo(150,0,function(){ //esto hace que no se vea el fondo negro
                    //modifico css de .men para que desaparesca                    
             });
       });
  });


Solo posteo la parte central que es lo que hace la animacion, si tienen dudas sobre otras partes o quieren ayuda con algo que si me funciona con gusto lo compartire.

bien como saven el fadeTo cambia la opacidad de un div, lo use para colocar divs como mascaras y diera la apariencia de encenderce el boton. el termino :eq() me permite referirme a un objeto dentro de las clases en este caso i marca el numero de elemento a travajar.

ya trate de limitar con variables pero se hace un caos alguna otra sujerencia??

Forma en que trate de limitar con variables:

Código :

 //todo el arreglo listo inicia en 0;
  $(".men").each(function(i){
       $(this).mouseenter(function(){
            [b]if(listo[i]==0){[/b]            
            $(".mascara:eq("+i+")").fadeTo(150,1,function(){ //esto aparece el fondo negro del menu
                    //modifico css de .men para que paresca                    
                   [b]listo[i]=1;[/b]
            });
           [b]}[/b]
       });

       $(this).mouseout(function(){
             [b]if(listo[i]==1){[/b]             
             $(".mascara:eq("+i+")").fadeTo(150,0,function(){ //esto hace que no se vea el fondo negro
                    //modifico css de .men para que desaparesca
                    [b]listo[i]=0;[/b]
             });
            [b]}[/b]
       });
  });


En teoria jamas se seleccionaria un boton hasta que este apagado (listo=0) y jamas se apagaria un boton hasta que este encendido (listo=1). por eso modifico la variable listo hasta el fondo de la funcion. Pero no funciono. Alguna otra sujerencia???

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie8
Citar            
MensajeEscrito el 02 Abr 2011 08:00 am

Por neisserian89

65 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Abr 2011 07:11 pm
Deja leo bien el articulo de momento no me es muy comprensible gracias de ante mano

Por rod00x3

Claber

595 de clabLevel



Genero:Masculino  

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.