如何在.show jquery之后添加时间延迟

时间:2022-10-26 01:17:15

I have a button on my page which when pressed displays a hidden div. Is there a way for me to use jquery .show so that this div (containing text) is shown, appears for a few seconds, say 3 seconds, and then is hidden again without a user havind to re-click the button. (ie. use the .hide jquery function). Below i will attach the appropriate code:

我的页面上有一个按钮,按下时会显示一个隐藏的div。有没有办法让我使用jquery .show这样显示这个div(包含文本),显示几秒钟,比如说3秒,然后再次隐藏,没有用户havind重新点击按钮。 (即使用.hide jquery函数)。下面我将附上相应的代码:

<body>

<button  class="info" id="one"> ? </button>

<div class="pop" id="1" style="display: none">
A Careless criminal has dropped a weapon!
</div>

<script>
   $("button#one").click(function () {
    $("div#1").show("slow");
    });
 </script>

</body>

2 个解决方案

#1


4  

Description

You should use jQuery's .show(), .delay() and .hide() method for that.

你应该使用jQuery的.show(),. delay()和.hide()方法。

Note: jQuery .show() and .hide() uses .animate() internally.

注意:jQuery .show()和.hide()在内部使用.animate()。

Check out the sample the this jSFiddle Demonstration.

查看此jSFiddle演示的示例。

Sample

$("button#one").click(function () {
    $("div#1").show("slow").delay(3000).hide("slow");
});

More Information

#2


2  

Yes, easily, using delay and hide:

是的,很容易,使用延迟和隐藏:

$('div#1').show('slow').delay(3000).hide('slow');

Note that this works because hide is an animation function. If you didn't have an animation function and wanted to do something else (e.g. removing with remove) you'd have to use a different method, using callbacks and setTimeout.

请注意,这是有效的,因为hide是一个动画功能。如果您没有动画功能并且想要执行其他操作(例如,使用remove删除),则必须使用不同的方法,使用回调和setTimeout。

#1


4  

Description

You should use jQuery's .show(), .delay() and .hide() method for that.

你应该使用jQuery的.show(),. delay()和.hide()方法。

Note: jQuery .show() and .hide() uses .animate() internally.

注意:jQuery .show()和.hide()在内部使用.animate()。

Check out the sample the this jSFiddle Demonstration.

查看此jSFiddle演示的示例。

Sample

$("button#one").click(function () {
    $("div#1").show("slow").delay(3000).hide("slow");
});

More Information

#2


2  

Yes, easily, using delay and hide:

是的,很容易,使用延迟和隐藏:

$('div#1').show('slow').delay(3000).hide('slow');

Note that this works because hide is an animation function. If you didn't have an animation function and wanted to do something else (e.g. removing with remove) you'd have to use a different method, using callbacks and setTimeout.

请注意,这是有效的,因为hide是一个动画功能。如果您没有动画功能并且想要执行其他操作(例如,使用remove删除),则必须使用不同的方法,使用回调和setTimeout。