jquery显示隐藏元素 jquery控制div显示隐藏高度

文章插图
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>39- jQuery 隐藏和显示动画</title>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: red;
margin-top: 20px;
display: none;
}
</style>
<script src=https://www.520longzhigu.com/diannao/”../static/js/jquery-3.6.0.js”>
<script>
$(function(){
$(“button”).eq(0).click(function(){ // 点击第一个按钮后调用函数
// $(“div”).css(“display”, “block”) // 找到div把他的css样式里的”display”设置成”block”，也就是显示的意思
$(“div”).show(1000, function(){ // 找到div用1000毫秒也就是1秒钟显示出来，而后执行函数
// 动画执行完毕调用
alert(‘显示动画完毕’) // 弹出窗口
})
})
$(“button”).eq(1).click(function(){ // 点击第二个按钮后调用函数
// $(“div”).css(“display”, “none”) // 找到div把他的css样式里的”display”设置成none，也就是隐藏的意思
$(“div”).hide(2000, function(){ // 找到div用2000毫秒也就是2秒钟隐藏起来，而后执行函数
alert(‘隐藏动画完毕’) // 弹出窗口
})
})
$(“button”).eq(2).click(function(){ // 点击第三个按钮后调用函数
$(“div”).toggle(3000, function(){ // 找到div用3000毫秒也就是3秒钟切换隐藏/显示状态，而后执行函数
alert(‘切换动画完毕’) // 弹出窗口
})
})
})
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div>
</div>
</body>
</html>

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：