Question

我有这样的场景：当你点击另一个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/

任何人都可以帮忙吗？

Answer 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

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

动画不会消失

2 个答案: