Cita:
Iniciado por Alexis88 Precisamente el método stop
evita que se cree una cola de eventos que es lo que sucede en tu página. Muéstranos el código actualizado para ver en dónde estás fallando.
Saludos
Bien, este es el trozo de código que controla la animación de los botones. Este todavia no tiene las modificaciones que tu me has recomendado.
Código:
//Pila de animaciones
//1º Animacion para Inicio
$(".home").hover(function () {
$(".icon-home").animate({"margin-left":"-90px"});
$("#home_title").animate({"margin-right":"-20px"});
}, function () {
$(".icon-home").animate({"margin-left":"20px"});
$("#home_title").animate({"margin-right":"-225px"});
});
//2ª Animacion para Info
$(".info").hover(function () {
$(".icon-stack").animate({"margin-left":"-80px"});
$("#info_title").animate({"margin-right":"-20px"});
}, function () {
$(".icon-stack").animate({"margin-left":"0px"});
$("#info_title").animate({"margin-right":"-225px"});
});
//3ª Animacion para Projects
$(".projects").hover(function () {
$(".icon-code").animate({"margin-left":"-80px"});
$("#projects_title").animate({"margin-right":"-20px"});
}, function () {
$(".icon-code").animate({"margin-left":"0px"});
$("#projects_title").animate({"margin-right":"-225px"});
});
//4ª Animacion para Contacto
$(".contact").hover(function () {
$(".icon-location").animate({"margin-left":"-80px"});
$("#contact_title").animate({"margin-right":"-20px"});
}, function () {
$(".icon-location").animate({"margin-left":"0px"});
$("#contact_title").animate({"margin-right":"-225px"});
});
Es un poco redundante y repetitivo.
Hay 4 botones, por lo que existen 4 funciones iguales.
Esta es la explicación de una.
Código:
$(".home").hover(function () {//Se aplica un hover al botón cuyo id es "home"
$(".icon-home").animate({"margin-left":"-90px"}); //Cuando el ratón dentro se mueve un span con la clase "icon-home" que contiene el icono.
$("#home_title").animate({"margin-right":"-20px"}); //También se mueve un párrafo cuyo id es "#home_title", este se encuentra mas alla de los margenes del padre, oculto.
}, function () {
$(".icon-home").animate({"margin-left":"20px"});//Cuando el raton sale el icono vuelve a su posicion original
$("#home_title").animate({"margin-right":"-225px"}); //Lo mismo ocurre con el parrado
});
¿Según tu debería aplicar el stop de la siguiente forma?
Código:
$(".home").stop(true,false).hover(function () {
$(".icon-home").animate({"margin-left":"-90px"});
$("#home_title").animate({"margin-right":"-20px"});
}, function () {
$(".icon-home").animate({"margin-left":"20px"});
$("#home_title").animate({"margin-right":"-225px"});
});