Pre-focus input box before fadeIn

Question

I have two input fields. The second input starts focused. I then want to fadeOut both inputs, having the second input staying focused until the end. Finally, I want to fadeIn both inputs and end up with the first input focused.

However, I do not want to see a "glitch", when the second input gets focused for an instant after fadeIn completes, and then the first input focuses immediately after.

This is what I have tried (see fiddle 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();
});

​Is there a way to "pre-focus" the second input field?

Answer 1

How about:

// 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});​
});