Set fancybox to open on a different fancybox close

Question

Is there a way to set a fancybox to open whenever a separate fancybox closes? I have tried the following

$('a.linkEditClass').fancybox({
        href: "#editClassPanel",
        closeClick: false,
        autoDimensions: true,
        autoScale: false,
        afterClose: function() {
            $.fancybox({
                href: "#classInfoPanel"
            });
        }
    });

But this doesn't seem to be doing anything. Here is my other fancybox code for reference

$('a#linkClassInfo').fancybox({
        href: "#classInfoPanel",
        //        maxHeight: 350,
        //        maxWidth: 425,
        closeClick: false,
        autoDimensions: false,
        autoScale: false
    });

They both target div's.

Answer 1

When you close fancybox, it takes a little while for it to clean up and complete the closing process so, opening another fancybox while the clean up process is running may trigger a js error that voids the second box from opening.

Just give it a little bit of time and it should work so

afterClose: function () {
    // wait for this box to close completely before opening the next one 
    setTimeout(function () {
        $.fancybox({
            href: "#classInfoPanel"
        });
    }, 300);
}

See JSFIDDLE