Ver Mensaje Individual
  #8 (permalink)  
Antiguo 29/08/2014, 18:43
Alextedicehola
 
Fecha de Ingreso: junio-2014
Ubicación: Andalucía
Mensajes: 23
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Calcular cuanto tiempo pasa el cursor sobre un elemento

Cita:
Iniciado por Alexis88 Ver Mensaje
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"});
    });