Why can't I focus a control that I reveal with slideDown()?

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

I think you can only focus the element once the DIV has fully stopped sliding?
not sure...

Answer 2

Try this:

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