[SOLUCIONADO] Problema con StopPropagation()

[Morod0]

Buenas tardes!

Tengo el siguiente código:

$( ".i1" ).mouseenter(function(i) {
e.stopPropagation();
$(".ti1").css({'opacity': "0"});
$(".cuadro-animacion-1").animate({height:"100%"},{duration: 600 });
});


$(".i1").mouseleave(function(e){
i.stopPropagation();
$(".cuadro-animacion-1").animate({height:"0%"},{duration: 300 });
$(".ti1").css({'opacity': "0.8"});
});



Me parece que es lo tipico que os habra pasado a muchos, pongo el mouse encima y lo quito y perfecto, pero que pasa si lo hago rapido varias veces? que se vuelve loco y sigue haciendolo, asi que mi intencion es que en el momento que saco el mouse de $(".i"), pare ejecucion, y no hay manera..

Alguien puede decirme que está puesto mal? como uso bien el metodo?

Gracias de antemano!! Un saludo!

[Morod0]

StopPropagation o cualquier otro metodo que funcione de manera similar.. nadie?

[Alexis88]

Utiliza el método .stop().

Saludos

[Morod0]

Iniciado por Alexis88

Utiliza el método .stop().

Saludos

He estado fuera, no habia visto que me habias respondido :S, no me funcion con stop()..

[Alexis88]

¿Y cómo es que lo has hecho? Si no nos muestras el código actualizado, será imposible seguir ayudándote. De cualquier modo, te sugiero ver los ejemplos que se encuentran en la documentación que te pasé y buscar más en internet.

Y, por favor, para mostrar código, utiliza el highlight que ofrece el foro. Lo puedes encontrar en el combo que se encuentra sobre el área de texto en el que escribes el mensaje.

Saludos

[Morod0]

Iniciado por Alexis88

¿Y cómo es que lo has hecho? Si no nos muestras el código actualizado, será imposible seguir ayudándote. De cualquier modo, te sugiero ver los ejemplos que se encuentran en la documentación que te pasé y buscar más en internet.

Y, por favor, para mostrar código, utiliza el highlight que ofrece el foro. Lo puedes encontrar en el combo que se encuentra sobre el área de texto en el que escribes el mensaje.

Saludos

Buenas!, así era como tengo el js, funciona lo que quiero hacer pero esta un poco descontrolado..

Código Javascript:

$( "#i1" ).mouseenter(function(i) {                
    $(".ti1").css({'display': "none"});
     $(".cuadro-trans-1").animate({height:"100%"},{duration: 600 });
  });
 
 $("#i1").mouseleave(function(e){                       
    $(".cuadro-trans-1").animate({height:"0%"},{duration: 300 });                                       
    $(".ti1").css({'display': "inherit"});
                                            
});
 

Le añadi el i.stopPropagation(); en el .mouseleave, pero nada, así que probe con el .stop(), quedo así..

Código Javascript:

$( "#i1" ).mouseenter(function(i) {                
    $(".ti1").css({'display': "none"});
     $(".cuadro-trans-1").animate({height:"100%"},{duration: 600 });
  });
 
 $("#i1").mouseleave(function(e){   
     i.stopPropagation();                   
    $(".cuadro-trans-1").animate({height:"0%"},{duration: 300 });                                       
    $(".ti1").css({'display': "inherit"});
                                            
});
 

No me funciona..ya busque en Internet y no hubo manera de hacer lo que quiero, y no se cual es la solucion, gracias por tu interes!

[Alexis88]

El método .stop() debes de encadenarlo entre el selector de jQuery y el método .animate(), pasándole los argumentos true, para limpiar la cola de peticiones que se haya formado y true, para completar la acción actual, así no se corta antes de pasar a la siguiente.

Código Javascript:

$("selector").stop(true, true).animate(/*...*/);
 

Si tienes alguna duda, te recomiendo ver la teoría y ejemplos que muestran aquí.

Un saludo

[Morod0]

Muchisimas gracias!

Me ha funcionado, aun tengo algunas dudas con js, metodos, eventos... tendre que aplicarme mas!

Gracias de nuevo, que vaya bien!