1

私には2つのinputフィールドがあります。2番目inputは焦点を合わせ始めます。次に、2番目の部分を最後まで集中させて、fadeOut両方を実行します。最後に、私は両方をやりたいと思っており、最初に焦点を当てることになります。inputinputfadeIninput input

inputただし、2番目のフォーカスが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();
});

input2番目のフィールドを「プレフォーカス」する方法はありますか？

4

3 に答える 3

2

どうですか：

// 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});​
});
于 2013-01-01T21:54:54.993 に答える
1

プロパティをfadeoutに変更する（そしてフォーカスを防ぐ）を使用するのではなく、次のことができます：displaynoneanimateopacity

// 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>

于 2013-01-01T21:50:37.443 に答える
0

秘訣は、domでレンダリングされていない要素にフォーカスを設定できないことです（display: nonefadeOutの後に発生します）。したがって、フェードアウトが終了したら、表示、フォーカス、非表示にしてからフェードインします。関数内の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/

または、フェードアウトする代わりに不透明度をアニメートします

于 2013-01-01T21:51:15.790 に答える