使用 jquery.animate 多次调用后动画延迟答案

【问题标题】：delay in animation after several calls using jquery.animate使用 jquery.animate 多次调用后动画延迟
【发布时间】：2014-10-18 01:57:32
【问题描述】：

我试图在点击 div 后通过调用在点击事件中实现 jquery.animate 的函数在整个页面上显示覆盖几次点击后发生了什么，比如 4 或 5 次尝试我开始注意到点击 div 和显示自身的叠加层之间存在延迟，并且每次点击后延迟都会增加

jsfiddle 中的详细代码，这里是 javascript 代码

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
    });
});

【问题讨论】：

标签： javascript jquery css animation delayed-execution

【解决方案1】：

每次您调用initTemplateEditor 时，您都会使用此功能添加到editorClose 点击链：

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

如果你在函数中添加alert，你会看到它第一次被调用一次，第二次被调用两次，等等。

在 click 函数之前添加这行代码，它应该可以解决您的问题：

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

【讨论】：