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。