delay in animation after several calls using jquery.animate

Question

I am trying to show overlay all over the page after click on div by calling function that implements jquery.animate in a click event what is happening after several click say like 4 or 5 tries I begin to note there is a delay between clicking the div and the overlay showing itself and this delay is getting increased after every click

a detailed code in jsfiddle and here is the javascript code

function initTemplateEditor(params) {
if (typeof params === "undefined") {
    throw new Error("can't init the editor without params!");
}

var
openEditor = function () {
    $(params.templateEditor).animate({
        opacity: 1
    }, {
        duration: 350,
        start: function () {
            $(params.templateEditor).css({
                "display": "block",
                    "width": $(window).width() - 10,
                    "height": $(window).height() - 10
            });
        }
    });
},
closeEditor = function () {
    $(params.templateEditor).animate({
        opacity: 0
    }, 350, function () {
        $(this).css("display", "none");
    });
};
$("#editorClose").click(function () {
    closeEditor();
});
openEditor();
}

$(".template-box").click(function () {
    initTemplateEditor({
        templateEditor: "#templateEditor",
        template: this
    });
});

Answer 1

Each time you call initTemplateEditor , you're adding to the editorClose click chain with this function:

$("#editorClose").click(function () {
    closeEditor();
});

If you add an alert inside the function, you'll see it's being called once the first time, twice the second time, etc.

Add this line of code immediately before that click function, and it should solve your problem:

$("#editorClose").unbind("click");