基本
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.show{
width: 300px;
height: 300px;
line-height: 300px;
background-color: #398439;
display: none;
}
.hde{
height: 300px;
width: 300px;
line-height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="show">
我show测试
</div>
<div class="hde">
我是hidde
</div>
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
<button id="btn03">btn03</button>
<script src="../jquery-3.3.1.min.js"></script>
<script>
$(function () {
$fun = function () {
alert('111');
}
$('#btn01').click(function () {
// alert('ddd');
// $('.show').show('slow');
// $('.show').show(1000);
// $('.show').show('fast');
// $('.show').show('normal');
$('.show').show('slow',$fun); // 带回调函数
})
$('#btn02').click(function () {
$('.hde').hide('slow',$fun);
})
$('#btn03').click(function () {
// toggle() hide是在slow() 和 hide() 之间切换
$('.show').toggle('slow',$fun);
$('.hde').toggle('fast',$fun);
})
})
</script>
</body>
</html>
滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div01{
width: 300px;
height: 300px;
line-height: 300px;
background-color: #1b6d85;
display: none;
}
.div02{
width: 300px;
height: 300px;
line-height: 300px;
background-color: #2aabd2;
}
</style>
</head>
<body>
<div class="div01">
我是slidedown
</div>
<div class="div02">
我是slideup
</div>
<button id="btn01">sidedown</button>
<button id="btn02">sideup</button>
<button id="btn03">sidetoggle</button>
<script src="../jquery-3.3.1.min.js"></script>
<script>
$(function () {
$fun = function () {
alert("111");
}
// 显示
$('#btn01').click(function () {
$('.div01').slideDown('slow',$fun);
})
// 隐藏
$('#btn02').click(function () {
$('.div02').slideUp('slow',$fun);
})
// 显示和隐藏之间的切换
$('#btn03').click(function () {
$('.div02').slideToggle('fast',$fun);
})
})
</script>
</body>
</html>
淡入淡出
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div01{
height: 300px;
width: 300px;
text-align: center;
background-color: #2aabd2;
/*margin: 0 auto;*/
padding-top: 40px;
display: none;
}
</style>
</head>
<body>
<div class="div01">
记得小平初见 <br>
两重心字罗衣 <br>
琵琶弦上说相思 <br>
当时明月在 <br>
曾照彩云归
</div>
<button id="btn01"> btn01</button>
<button id="btn02">btn02</button>
<button id="btn03">btn03</button>
<button id="btn04">btn04</button>
<script src="../jquery-3.3.1.min.js"></script>
<script>
$fun = function () {
alert('2222');
}
$(function () {
// 显示
$('#btn01').click(function () {
$('.div01').fadeIn('slow',$fun);
})
// 隐藏
$('#btn02').click(function () {
$('.div01').fadeOut('slow',$fun);
})
// 设置透明度 注意 即时隐藏的元素 设置了透明度被点击后也会显现
$('#btn03').click(function () {
$('.div01').fadeTo('slow',0.66);
})
// 显示和隐藏的切换
$('#btn04').click(function () {
$('.div01').fadeToggle('slow');
})
})
</script>
</body>
</html>
网友评论