<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 16:38-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示" id="show"/>
<input type="button" value="隐藏" id="hide"/>
<input type="button" value="切换" id="toggle"/> <br/><br/>
<div id="div1">我是一个div</div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 1.显示
$('#show').click(function () {
// 给 id为 div1的元素, 动画显示
// 没有参数, 没有动画效果
// $('#div1').show();
$('#div1').show(3000);
// $('#div1').show('fast');
// $('#div1').show('normal');
// $('#div1').show('slow');
// 3.回调函数
// $('#div1').show(2000, function () {
// alert('动画执行完毕了...');
// });
});
//2.隐藏
$('#hide').click(function () {
// 让id为div1的元素 动画隐藏
// 没有参数, 没有动画效果
// $('#div1').hide();
$('#div1').hide(3000);
// 也有 隐藏函数
// $('#div1').hide(5000, function() {
// alert('我隐藏了');
// });
});
//3.切换 toggle
//如果元素是隐藏状态就动画显示; 如果元素是显示状态就动画影藏.
$('#toggle').click(function () {
$('#div1').toggle(3000);
});
});
</script>
