javascript - fadeIn 前的预对焦输入框

Question

我有两个input领域。第二个input开始专注。然后我想要fadeOut两个inputs，让第二个input保持专注直到结束。最后，我想fadeIn同时input以第一个 input焦点结束。

但是，我不想看到“故障”，当第二个input在fadeIn完成后立即聚焦，然后第一个input立即聚焦。

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

// 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领域？

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

而不是使用fadeoutwhich 将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});

​</p>

Answer 3

诀窍是您不能将焦点设置到未在 dom 中呈现的元素（display: none发生在 fadeOut 之后）。所以在淡出完成后，使其可见，聚焦，不可见，然后淡入。不会有闪烁，因为函数中的 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/

或者你动画不透明度而不是淡出