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> 

はどのように、遅延をこのslideupを持って、上記のようなイベントを削除するには、動的に作成された要素を設定するために？

Answer 1

代わりのあなたは、私はそれがあなたのために働くべきだと思い

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

ようsetTimeout()機能を使用することができます遅延を使用。

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

また、スライドアップもキュー機能にあります。