javascript - 动画不会消失

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

fiddle 链接如下: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