jquery demora que se siga un enlace

Question

Tengo una breve animación basada en css que quiero reproducir antes de seguir un enlace (una tarjeta que se lanzó en la carga de la página se abre después del clic). Actualmente, sin embargo, la página llamada carga demasiado rápido. Quiero poder retrasar brevemente el href de ser seguido.

Esto es lo que tengo:

$(document).ready(function() { 
    $("#card").css("top","0px"); 
    $(".clickit").click(function() { 
     $("#card").css("top","-500"); 
    }); 
}); 

La primera línea se abalanza sobre la tarjeta en al cargar la página. Después de eso es la llamada de clic que modifica el CSS, pero como he dicho, debe haber algún tipo de retraso porque la página se carga inmediatamente, en lugar de después de la animación. El CSS que se ha modificado es el siguiente:

#card { 
    width: 400px; 
    height: 500px; 
    position: relative; 
    top: -500px; 
    -webkit-transition:all .5s; 
} 

(sí, sé que esto es webkit-solamente en este momento)

Este es un problema muy similar a this question a partir de 2008, pero sé jQuery ha sido actualizado significativamente desde entonces, así que quería ver si había una solución más moderna.

¡Gracias!

Answer 1

Dado que está utilizando .css() y -webkit-transition:, deberá usar un setTimeout() para retrasar la nueva ubicación.

probar el ejemplo vivo:http://jsfiddle.net/2WJH9/

$(document).ready(function() { 
    $("#card").css("top","0px"); 
    $(".clickit").click(function() { 
     $("#card").css("top","-500px"); // Added px to make it work, 
             // or get rid of quotes -500 
     var href = $(this).attr('href'); 

      // Delay setting the location for one second 
     setTimeout(function() {window.location = href}, 1000); 
     return false; 
    }); 
});​ 

El setTimeout() retrasará la window.location de ser establecido para 1 segundo (1.000 milisegundos). Si desea hacer coincidir las .5 segundos desde -webkit-transition:, a continuación, cambiar a 500.

• .setTimeout() - http://www.w3schools.com/js/js_timing.asp

Answer 2

Este es un problema muy similar a esta pregunta de 2008, pero sé que jQuery se ha actualizado significativamente desde entonces, así que quería ver si había una solución más moderna.

No, sigue siendo la misma respuesta. Cancele el evento, luego cargue la ubicación usted mismo más tarde.

Answer 3

Puede preventDefault() en el que acceder a la función animado de jQuery para llevar a cabo sus transiciones CSS , siguiendo el enlace una vez completada la animación.

$('.clickit').click(function(e) { 
    e.preventDefault(); 
    href = $(this).attr('href'); 
    $('#card').animate({ top: '-500px' }, 500, function() { 
     window.location = href; 
    }); 
});