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> 

如何設置動態創建的元件具有此效果基本show，延遲，如上所述移除事件？

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也在隊列函數中。