[英]Jquery: How to set delay and slide up on newly created element
I want to set the newly created element to slide up after a few seconds. 我想将新创建的元素设置为在几秒钟后向上滑动。
$("div[data-error='true']").delay(5000).slideUp(500, function () {
$("#error-alert").remove();
});
$("div[data-success='true']").delay(5000).slideUp(500, function () {
$("#success-alert").remove();
});
For instance these are the elements that will be added up dynamically: 例如,以下是将动态添加的元素:
<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>
How to set the dynamically created element to have this slideup, delay, remove event as above described? 如何将动态创建的元素设置为具有如上所述的上滑,延迟,移除事件?
Instead of using a delay you can use the setTimeout()
function like 您可以使用
setTimeout()
函数代替延迟,而无需使用延迟
setTimeout(function(){
$("div[data-error='true']").slideUp(500, function () {
$("#error-alert").remove();
});
}, 5000)
I think it should work for you. 我认为它应该为您工作。
$.delay()
is only advisable when used to delay effects as part of a collection of animation/effects. 仅当将延迟作为动画/效果集合的一部分用于效果时才建议使用
$.delay()
。
You should use JavaScript's native setTimeout()
instead. 您应该改为使用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>
Try to remove the Error alert in a queue. 尝试删除队列中的错误警报。
$("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();
});
Or the slideUp also in the queue function. 或在队列功能中也使用slideUp。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.