Question

I want to reveal a div with an input inside when you click a button, and set its focus.

If I use show(), it works, but if I use slideDown() the focus is lost after the animation completes. How can I prevent this from happening?

Sample code:

$('document').ready(function(){     $('#MyButton').click(function(e){         e.preventDefault();         $('.SlidingDiv').slideDown();         $('#MyInput').focus();     }); });  <input type='button' value='Click Me' id='MyButton' /> <div class='SlidingDiv' style='display:none;'><input type='text' id='MyInput' /></div> 

Answer 1

Try this:

$(function(){     $('#MyButton').click(function(e){         e.preventDefault();         $('.SlidingDiv').slideDown(function(){             // Callback function - will occur when sliding is complete.             $('#MyInput').focus();         });     }); });