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 回答