jQuery显示5秒钟然后隐藏


145

.show成功提交表单后,我一直在显示隐藏的消息。

如何显示消息5秒钟然后隐藏?

Answers:


351

您可以.delay()在动画之前使用,如下所示:

$("#myElem").show().delay(5000).fadeOut();

如果不是动画,请setTimeout()直接使用,如下所示:

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

您进行第二个操作是因为没有持续时间.hide()通常不会出现在动画(fx)队列中,它只是即时效果。

或者,另一个选择是使用.delay()和您.queue()自己,例如:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});

1
建议2与显示对勾图标并使用fadeOut()而不是hide()完美配合。好答案。
凯文Zych

2
@wilsjd不,您不能,.delay()将不.hide()显示该元素,然后将其立即隐藏。看到这个jsFiddle,这就是为什么尼克说“如果不是动画,请直接使用setTimeout(),就像这样:...。”
Wesley Smith

嗯,我想知道这是否在两年前有效。不错的发现。感谢您让我诚实。
wilsjd

我也实现了这一点,但是当我在5秒钟内两次显示msg时,它应该隐藏prev并重新显示,而不会重置第一个延迟
alamnaryab 2015年

18

您可以使用以下效果进行动画处理,也可以根据需要更改值

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow'); 

1
$(...)。fadeIn(...)。animate(...)。effect不是JQuery 2.1.3中的函数
Dustin Charles

@DustinCharles添加jQueryUI不仅是jQuery。jQuery不包含effect()函数,例如code.jquery.com/ui/1.12.0/jquery-ui.min.js
Rahul

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.