jquery ritardare un collegamento dall'essere seguito

Question

Ho una breve animazione basata su CSS che voglio riprodurre prima che venga seguito un collegamento (una scheda che si piega in un caricamento di pagina si piega fuori dopo un clic). Attualmente, tuttavia, la pagina chiamata carica troppo velocemente. Voglio essere in grado di ritardare brevemente l'href dall'essere seguito.

Ecco quello che ho:

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

La prima riga piomba la carta in al caricamento della pagina. Dopo questo è la chiamata di clic che modifica il CSS, ma come ho detto ci deve essere una sorta di ritardo in là perché la pagina viene caricata immediatamente, anziché dopo l'animazione. Il CSS che viene modificato è simile al seguente:

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

(sì, so che questo è webkit solo in questo momento)

Questo è un problema molto simile a this question dal 2008, ma so jQuery è stato aggiornato in modo significativo da allora, quindi volevo vedere se esisteva una soluzione più moderna.

Grazie!

Answer 1

Poiché si utilizza .css() e -webkit-transition:, è necessario utilizzare un setTimeout() per ritardare la nuova posizione.

Prova l'esempio 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; 
    }); 
});​ 

Il setTimeout() ritarderà il window.location venga impostato per 1 secondo (1000 millisecondi). Se si desidera far corrispondere i .5 secondi dalla -webkit-transition:, poi modificarlo in 500.

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

Answer 2

Questo è un problema molto simile a questa domanda del 2008, ma so che jQuery è stato aggiornato significativamente da allora, quindi volevo vedere se esisteva una soluzione più moderna.

No, ancora la stessa risposta. Annullare l'evento, quindi caricare la posizione in un secondo momento.

Answer 3

È possibile preventDefault() sul collegamento, quindi utilizzare la funzione animate di jQuery per eseguire le vostre transizioni CSS , seguendo il link dopo che l'animazione è stata completata.

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