Question

我有两个input字段。第二个input开始集中注意力。然后我想fadeOut input两个input，让第二个fadeIn保持专注，直到结束。最后，我想input input两个input，最后以第一个 fadeIn为重点。

但是，当input完成后，第二个// Focus the second input field $('input').eq(1).focus(); // Fade out both input fields $('div').fadeOut(); // Fade in both input fields $('div').fadeIn(function () { // Causes a "transition glitch" $('input').eq(0).focus(); });在焦点上立即聚焦，然后第一个input立即聚焦后，我不希望看到“小故障”。

这就是我的尝试（参见小提琴here）：

{{1}}

有没有办法“预先聚焦”第二个{{1}}字段？

Answer 1

怎么样：

// Focus the second input field
$('input').eq(1).focus();

// Fade out both input fields
$('div').animate({'opacity': 0}, function() {
    $('input').eq(0).focus();

    // Fade in both input fields
    $('div').animate({'opacity': 1});
});

Answer 2

相反，使用fadeout将display属性更改为none（并防止焦点），您可以animate opacity：

// Focus the second input field
$('input').eq(1).focus();

// Fade out both input fields
$('div').animate({opacity: 0}, function () {
    // focus the first field once they are invisible
    $('input').eq(0).focus();
});

// Fade in both input fields
$('div').animate({opacity: 1});

Answer 3

技巧是你无法将焦点设置为未在dom中呈现的元素（fadeOut后发生display: none）。所以在淡出结束后，让它可见，聚焦，不可见，然后淡入。没有闪烁，因为函数中的DOM操作都发生在浏览器渲染之前。

// Focus the second input field
$('input').eq(1).focus();

// Fade out both input fields
$('div').fadeOut(500, function() {
    // Make the input visible in the dom
    $('div').show();
    // set the focus
    $('input').eq(0).focus();
    // make it invisible again, then start the fade in
    $('div').hide().fadeIn();
});

http://jsfiddle.net/b5faq/2/

或者您为不透明度设置动画而不是淡出

淡入前预对焦输入框

3 个答案: