jquery Verzögerung eine Verbindung von verfolgt werden

Question

Ich habe eine kurze CSS-basierte Animation, die ich ausspielen möchte, bevor eine Verknüpfung folgt (eine Karte, die beim Laden der Seite nach dem Klicken ausgelöst klopft). Derzeit lädt sich die Seite jedoch zu schnell auf. Ich möchte in der Lage sein, die href kurz davor zu halten, verfolgt zu werden.

Hier ist, was ich habe:

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

Die erste Zeile swoops die Karte auf Seite laden. Danach ist der Klickaufruf, der das CSS verändert, aber wie ich sagte, muss da eine gewisse Verzögerung sein, da die Seite sofort geladen wird, anstatt nach der Animation. Die CSS, die geändert wird, sieht wie folgt aus:

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

(ja, ich weiß, das ist Webkit-nur jetzt) ​​

Dies ist ein Problem sehr ähnlich this question aus dem Jahr 2008, aber ich weiß, jQuery hat seither immer wieder aktualisiert, also wollte ich sehen, ob es eine modernere Lösung gibt.

Vielen Dank!

Answer 1

Da Sie .css() und -webkit-transition: verwenden, müssen Sie eine setTimeout() verwenden, um den neuen Speicherort zu verzögern.

live Beispiel Versuchen: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; 
    }); 
});​ 

Die setTimeout() die window.location aus gesetzt wird für 1 Sekunde (1,000 Millisekunden) verzögern. Wenn Sie die .5 Sekunden von -webkit-transition: übereinstimmen soll, ändern Sie es dann auf 500.

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

Answer 2

Dies ist ein Problem sehr ähnlich zu dieser Frage aus dem Jahr 2008, aber ich weiß, dass jQuery seit damals erheblich aktualisiert wurde, also wollte ich sehen, ob es eine modernere Lösung gab.

Nein, immer noch die gleiche Antwort. Brechen Sie das Ereignis ab und laden Sie den Standort später selbst.

Answer 3

können Sie prevent() auf der Link dann jQuery animieren Funktion verwenden, um Ihre CSS-Übergänge durchführen , nach dem Link, nachdem die Animation abgeschlossen wurde.

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