animate jquery fullcalendar after rendering

Question

After showing a hidden <div> and calling the render function for fullcalendar, it pops into existence a bit jarringly. How would I go about fading or sliding it in after it completes rendering?

$("#show-div").click(function () {
    $("#hidden-div").fadeIn("slow", function () {
        $('#calendar').fullCalendar('render');
    });
});

http://jsfiddle.net/waspinator/sxfyd/7/

Answer 1

Something like this. Shorten the duration from 3000 to speed up the calender fade-in:

$('#calendar').fullCalendar({
    // put your options and callbacks here
})

$("#show-div").click(function () {

   $("#hidden-div").show("fade", 3000);
   $('#calendar').show('fade',{ queue:false},3000).fullCalendar('render');
});

http://jsfiddle.net/waspinator/SadZR/

Answer 2

this seems to work for slideDown

$('#calendar').fullCalendar({
    // put your options and callbacks here
})

$('.fc-header').hide();

$("#show-div").click(function () {
    $("#hidden-div").fadeIn("slow", function () {
        $('#calendar').fullCalendar('render');
        $('#calendar').hide();
         $( ".fc-header" ).slideDown( "slow", function() {
            $('#calendar').slideDown("slow");
         });
    });
});

http://jsfiddle.net/waspinator/sxfyd/19/