您的位置：首页 > Web前端 > JQuery

【每天一个JQuery特效】(demo6)在指定的时间内完成元素的显示或隐藏

2018-07-06 08:25 821 查看

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素，语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在指定的时间内完成元素的显示或隐藏</title>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//对单击“延时显示”按钮的响应
function ShowDelay(){
$("#test").show(5000);
}
//对单击“延时隐藏”按钮的响应
function HideDelay(){
$("#test").hide(10000);
}
//对单击“自动切换”按钮的响应
function AutoSwitch(){
$("#test").toggle(8000);
}
</script>
<style>
#test{
display: none;
width: 400px;
height: 200px;
border: 1px solid blue;
background:url("img/girl.jpg");
}
</style>
</head>
<body>
<div id="test"></div><br>
<button onclick="ShowDelay()" style="width: 130px;">延时展示</button>
<button onclick="HideDelay()" style="width: 130px;">延时隐藏</button>
<button onclick="AutoSwitch()" style="width: 130px;">自动切换</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery

相关文章推荐

新的分享

章节导航