动画不会消失答案

【问题标题】：animation does not disappear动画不会消失
【发布时间】：2014-03-03 10:34:34
【问题描述】：

我有一个这样的场景：当您单击另一个 div 时会出现并显示等待动画并且它可以正常工作但是当我希望它消失时，它不起作用是我的代码：

$(document).ready(function () {


$('#t').hide();
$("#clickme").click(function () {
    $("#t").fadeIn(4000, function () {
        // Animation complete
        $("#t").show();
    });
});
setTimeout(

}, 5000);
$("#t").fadeOut(4000, function () { 
    $("#t").hide();
 });
});

小提琴链接如下：http://jsfiddle.net/hminaee/qF8dX/1/

谁能帮忙？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以在此处使用 delay()：

$(document).ready(function () {
    $('#t').hide();
    $("#clickme").click(function () {
        $("#t").fadeIn(4000, function () {
            $("#t").show().delay(4000).fadeOut(1000);
        });
    });
});

所以基本上，在显示您的等待动画后，它会延迟 4 秒，然后在 1 秒内淡出您的等待动画。

Fiddle Demo

根据您的评论，您可以将 pointer-events: none 添加到您的模态中，以允许点击事件通过模态：

.modal {
    pointer-events: none; 
}

Updated Fiddle

【讨论】：

非常感谢您的出色回答，但在以下情况下，当我希望它在用户单击 div1 时停止时，它不起作用这是什么问题：jsfiddle.net/hminaee/qF8dX/8

【解决方案2】：

这与您的原始代码密切相关： Fiddle

$(document).ready(function () {
    $('#t').hide();
    $("#clickme").click(function () {
        $("#t").fadeIn(4000, function () {
            // Animation complete
        }).promise().done(function () {;
            $("#t").fadeOut(4000, function () {
                // Animation complete
                $("#t").hide();
            });
        });
    });
});

【讨论】：

非常感谢您的出色回答，但在以下情况下，当我希望它在用户单击 div1 时停止时，它不起作用这是什么问题：jsfiddle.net/hminaee/qF8dX/8