How can I fade in and then set focus in jQuery?

Question

I've got this little snippet of jQuery:

$('#showlink').click(function(){ 
 $('#linkwindow').show('fast');
 $('#linkwindow input').focus();
}

How do I call the focus only after the fade has ended? Sometimes it happens slightly before and I end up with a weird rendering bug.

Answer 1

Try this, using the callback parameter.

$('#showlink').click(function(){  
  $('#linkwindow').show('fast', function() {
    $('#linkwindow input').focus();
  });
});

Answer 2

You may add a callback to the show method:

$('#showlink').click(function(){ 
    $('#linkwindow').show('fast', function() {
        $('#linkwindow input').focus();
    });
})

Answer 3

Use the callback second parameter.

Something like:

$('#linkwindow').show('fast', function() { 
    $('#linkwindow input').focus(); 
});