jQuery .focus（）导致页面跳转

Question

我有一个功能，应该将用户滚动回页面顶部的搜索输入， 然后将焦点放在它上面（这样光标闪烁）。 出于某种原因，它似乎首先将焦点应用于搜索输入。 这会在页面上创建一个非常快速的跳跃/ spazzy运动到搜索栏，跳回到底部，然后慢慢向上滚动。

Javascript：

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

HTML：

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

我试过设置.delay（）函数无济于事; 似乎总是首先应用.focus（）。 为什么会这样？

Answer 1

“为什么会这样？”

动画效果是异步的。 也就是说， .animate()函数在“调度”动画之后立即返回（可以这么说）并立即继续执行下一个语句 - 在您的情况下，即.focus()语句。 实际动画将在当前JS完成后发生。

幸运的是.animate()方法提供了一个选项，您可以传递将在动画完成时调用的回调函数，这样您就可以在该回调函数中进行聚焦：

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

Answer 2

您应该在动画完成时调用焦点功能，如下所示：

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

Answer 3

如果你发现像我这样的问题，你可能正在寻找与js focus（）相关的CSS相关问题，你可能会认为你运气不好。 好吧，再想一想 - 好消息是，当CSS动画或转换结束然后触发您的事件时，有一种方法可以进行回调。

您可以使用jQuery的one方法，并使用webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend进行转换，或使用webkitAnimationEnd oanimationend msAnimationEnd animationend进行动画制作。

一个例子：

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;
}

解决方案不是我的解决方案，我只是在浪费了几个小时之后找到了解决方案，而且如果你先发现这个问题，我会发布它。

资料来源： http ： //blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end