给定一个div元素,如何使用jQuery几秒后隐藏div元素?下面本篇文章就来给大家介绍一下使用jQuery延迟几秒隐藏div元素的方法,希望对大家有所帮助。

6e2adced3d14170aca9647d459a4daa7.png

想要使用jQuery延迟几秒隐藏div元素,可以先选择div元素,然后使用延迟函数(setTimeOut(), delay())来提供隐藏div元素的延迟。

示例1:使用setTimeOut()方法为fadeOut()方法提供延迟

#div {

background: lightcoral;

height: 100px;

width: 200px;

line-height: 100px;

margin: 0 auto;

color: white;

}

单击按钮,在1秒后隐藏DIV元素。

一个DIV盒子

点击这里

function Fun() {

setTimeout(function() {

$("#div").fadeOut('fast');

}, 1000);

$("#DOWN").text("DIV元素在1秒后隐藏");

}

效果图:

a6890e0af617be0b3d692a1ae3a47f87.gif

示例2:使用delay()方法为fadeOut()方法提供延迟

#div {

background: lightcoral;

height: 100px;

width: 200px;

line-height: 100px;

margin: 0 auto;

color: white;

}

单击按钮,在2秒后隐藏DIV元素。

一个DIV盒子

点击这里

function Fun() {

$("#div").delay(2000).fadeOut('fast');

$("#DOWN").text("DIV元素在2秒后隐藏");

}

效果图:

217bdf1b1565bbd1aad5206a73017ca2.gif

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐