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

Question

I have a small jQuery snippet:

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

How do I trigger focus only after the fade ends? Sometimes this happens a little earlier, and I end up with a weird rendering error.

Answer 1

Try this using the callback parameter .

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

Answer 2

You can add a callback to the method show:

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

Answer 3

Use the second callback parameter.

Sort of:

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