jQuery：如何设置延迟并在新创建的元素上滑动

Question

我想将新创建的元素设置为在几秒钟后向上滑动。

$("div[data-error='true']").delay(5000).slideUp(500, function () {
    $("#error-alert").remove();
});
$("div[data-success='true']").delay(5000).slideUp(500, function () {
    $("#success-alert").remove();
});

例如，以下是将动态添加的元素：

<div class="alert alert-danger" role="alert" id="error-alert1" data-success="true">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Error:</span>
    @ViewBag.Error
    <button type="button" class="close" data-dismiss="alert">x</button>
</div>

<div class="alert alert-success" role="alert" id="success-alert1" data-error="true">
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
    <span class="sr-only">Success:</span>
    @ViewBag.Success
    <button type="button" class="close" data-dismiss="alert">x</button>
</div>

如何将动态创建的元素设置为具有如上所述的上滑，延迟，移除事件？

Answer 1

您可以使用setTimeout()函数代替延迟，而无需使用延迟

setTimeout(function(){
    $("div[data-error='true']").slideUp(500, function () {
        $("#error-alert").remove();
    });
}, 5000)

我认为它应该为您工作。

Answer 2

仅当将延迟作为动画/效果集合的一部分用于效果时才建议使用$.delay() 。

您应该改为使用JavaScript的本机setTimeout() 。

 setTimeout(function() { $("div[data-error='true']").slideUp(500, function () { $("#error-alert").remove(); }); $("div[data-success='true']").slideUp(500, function () { $("#success-alert").remove(); }); }, 3000); 

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="alert alert-danger" role="alert" id="error-alert1" data-success="true"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> @ViewBag.Error <button type="button" class="close" data-dismiss="alert">x</button> </div> <div class="alert alert-success" role="alert" id="success-alert1" data-error="true"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> <span class="sr-only">Success:</span> @ViewBag.Success <button type="button" class="close" data-dismiss="alert">x</button> </div> 

Answer 3

尝试删除队列中的错误警报。

$("div[data-error='true']").delay(5000).slideUp(500).queue(function () {
   $("#error-alert").remove();
   $(this).dequeue();
});
$("div[data-success='true']").delay(5000).slideUp(500).queue(function () {
   $("#success-alert").remove();
    $(this).dequeue();
});

或在队列功能中也使用slideUp。