Fadein callback not working

Question

I'm just having some minor callback issues with my fadeIn and slideDown. The callback isn't working properly for the fadeIn and then slideDown.

Instead of post a lot of code here, I'll just post the jQuery code and a link to jsFiddle.

$(".send_email_button").click(function(){
    $(".fullscreen").fadeIn(function() {
        $(".send_email").slideDown();
    });
});

$(".email_close").click(function(){
    $(".send_email").slideUp(function() {
        $(".fullscreen").fadeOut();
    });
});

http://jsfiddle.net/7zq716bf/

Answer 1

The reason it wasn't working as expected the first time, was because the .send_email wasn't initially hidden. Set display: none on it initially, and then the .slideDown() method will be called when the first .fadeIn() method ends.

Updated Example

.send_email {
    display: none;
}

Prior to this, the duration of the initial .slideDown() event was 0 because the .send_email element was already visible.