2

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

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() 。为什么会这样？

4

3 回答 3

14

“为什么会这样？”

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

幸运的是，该.animate()方法为您提供了一个选项来传递将在动画完成时调用的回调函数，因此您可以在该回调函数中进行焦点操作：

$('html,body').animate({scrollTop: $('#search').offset().top},'medium', function(){
    $('#search').focus();
});
于 2012-09-10T00:32:30.920 回答
4

您应该在动画完成后调用焦点函数，如下所示：

function goToSearch(){
    $('html,body').animate({scrollTop: $('#search').offset().top},'medium',function(){
        $('#search').focus();
    });
}
于 2012-09-10T00:26:12.443 回答
1

如果您像我一样发现了这个问题，您可能正在寻找与 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

于 2017-03-31T23:33:57.593 回答