jQuery fadeIn not running and inline glitch

Question

I cannot seem to get my fadeIn working and also my animation is messing with another button. I am fading out a div, applying some css, and then trying to fade it back in. it is however just instantly appearing and the fadeIn function is not running.

Secondly, as you will see, one of my buttons is pushed off the table and I cannot figure out why.

http://jsfiddle.net/Ufv68/2/

function animateTables(){
    $("#leaguesSelection").css({
        "overflow":"hidden",
        "margin-bottom":"0px"
    })
    $("#leaguesSelection").animate({
        height: "35px",
        padding:"2px"
    });
    $(".divisionHeader").fadeOut(400,function(){
        $(".divisionHeader").css({
            "display":"inline-block",
            "overflow":"hidden"
        });
    });
    $('.divisionHeader').animate({
        width: "35px",
        height: "35px",
        padding: "0"},
        400,function(){
            $(".divisionHeader").fadeIn(1800);
    });
    //$(".divisionHeader").fadeIn(1800);
}
$('.runMe').click(function(){
   animateTables(); 
});

Answer 1

Tell me if this works for you http://jsfiddle.net/Djuka/UP6Q6/

function animateTables(){
        $("#leaguesSelection").css({
            "overflow":"hidden",
            "margin-bottom":"0px"
        })
        $("#leaguesSelection").animate({
            height: "35px",
            padding:"2px"
        });
        $(".divisionHeader").fadeOut(400,function(){
            $("#leaguesSelection div").css("float", "left");
            $(".divisionHeader").css({
                "overflow":"hidden",
                width: "35px",
                height: "35px",
                padding: "0"
            });
        }).fadeIn(1800);
}
$('.runMe').click(function(){
    animateTables(); 
});

It should work, but it's really messy doing it your way and I would suggest you to change approach. Also, it would be helpful if you could describe how should elements be positioned after the animations.

Try this: http://jsfiddle.net/Djuka/D3N5F/4/

Here is also reverse animation. Click 'All' button once for normal and then click it again for reverse animation. Doing animations with jquery animation function can make many problems if overused. That is because changes in CSS attributes are written directly into style attribute of that element in html and it will mess with other CSS selectors. Also, animations done this way look way more smoother, in my opinion.