jQuery .focus() verursacht einen Seitensprung

Question

Ich habe eine Funktion, die einen Benutzer zurück zu einer Sucheingabe am oberen Rand der Seite blättern sollte, und entonces setzen Sie den Fokus darauf (so dass der Cursor blinkt). Aus irgendeinem Grund scheint er den Fokus zuerst auf die Sucheingabe zu setzen. Dies führt zu einem sehr schnellen Sprung/einer rasanten Bewegung der Seite zur Suchleiste, springt dann zurück nach unten und scrollt dann langsam nach oben.

Das Javascript:

function goToSearch(){
    $('html,body').animate({scrollTop: $('#search').offset().top},'medium');
    $('#search').focus()
}

Das HTML:

<input type="text" id="search" placeholder="search">
...
<a href="#" onclick="goToSearch()">Search</a>

Ich habe versucht, .delay()-Funktionen zu setzen, ohne Erfolg; es scheint immer zuerst .focus() anzuwenden. Warum ist dies geschehen?

Answer 1

"Warum passiert das?"

Der Animationseffekt ist asynchron. Das heißt, die .animate() Funktion gibt zurück すぐさま nach dem "Scheduling" der Animation (sozusagen) und die Ausführung wird sofort mit der nächsten Anweisung fortgesetzt - in Ihrem Fall ist das die .focus() Erklärung. Die eigentliche Animation findet statt, nachdem das aktuelle JS abgeschlossen ist.

Zum Glück ist die .animate() Methode bietet die Möglichkeit, eine Callback-Funktion zu übergeben, die aufgerufen wird, wenn die Animation abgeschlossen ist, so dass Sie den Fokus innerhalb dieser Callback-Funktion setzen können:

$('html,body').animate({scrollTop: $('#search').offset().top},'medium', function(){
    $('#search').focus();
});

Answer 2

Rufen Sie die Fokusfunktion auf, wenn die Animation abgeschlossen ist, etwa so:

function goToSearch(){
    $('html,body').animate({scrollTop: $('#search').offset().top},'medium',function(){
        $('#search').focus();
    });
}

Answer 3

Wenn Sie diese Frage wie ich gefunden haben, waren Sie wahrscheinlich auf der Suche nach einem CSS-Problem im Zusammenhang mit der js focus() und Sie könnten denken, Sie haben kein Glück. Nun, denken Sie wieder - die gute Nachricht ist, dass es eine Möglichkeit, einen Rückruf zu haben, wenn ein CSS-Animation oder Übergang endet und dann Ihr Ereignis auslösen.

Sie können die jQuery-Funktion one Methode und verwenden Sie entweder webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend für Übergänge oder webkitAnimationEnd oanimationend msAnimationEnd animationend für Animationen.

Ein Beispiel:

JS:

var myButton = $('#button'),
   myBox = $('#box');
    myButton.click(function () { 
    myBox.addClass('change-size');
    myBox.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {
    // code to execute after animation ends
    myBox.removeClass('change-size');
    });

});

CSS:

.box {
   width: 100px;
   height: 100px;
   background: hotpink;
}

@keyframes growBox {
    to {
        width: 300px;
        height: 200px;
    }
}

.change-size {
    animation: growBox 3s linear 0s 1 normal;
}

Die Lösung ist nicht von mir, ich habe sie nur nach ein paar vergeudeten Stunden gefunden, und ich poste sie, falls Sie diese Frage zuerst finden.

Quelle: http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end