1、显示/隐藏
hide():隐藏
将高度、宽度、透明度变为0;display为“none”
show():显示
将高度、宽度、透明度变为初始的CSS设置的样式;display为“block”
toggle():切换
如果display为none的时候,点击一下就变成了block,反之变为none
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title></title>
<script src="../jquery-3.2.1.min.js"></script>
<style>
#div1{
width: 1000px;
height: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btnhide">隐藏</button>
<button id="btnshow">出现</button>
<button id="btntoggle">切换</button>
</body>
<script>
$("#btnhide").click(function(){
$("#div1").hide(1);
});
$("#btnshow").click(function(){
$("#div1").show(3000);
});
$("#btntoggle").click(function(){
$("#div1").toggle(9999);
});
</script>
</html>
2、淡入/淡出
fadeIn():淡入
将隐藏的样式通过改变其透明度(透明度从0-1),让它显示
fadeOut():淡出
将显示的样式通过改变其透明度(透明度从1-0),让它隐藏起来
fadeToggle():淡入淡出的切换
如果样式隐藏,则将它显示出来
如果样式显示,则将它隐藏起来
fadeTo():固定其透明度(透明度在0-1之间)
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title></title>
<script src="../jquery-3.2.1.min.js"></script>
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btnfadein">淡出</button>
<button id="btnfadeout">淡入</button>
<button id="btnfadetoggle">切换</button>
<button id="btnfadeto">固定</button>
</body>
<script>
$("#btnfadein").click(function () {
$("#div1").fadeIn("10000");
});
$("#btnfadeout").click(function(){
$("#div1").fadeOut("10000");
});
$("#btnfadetoggle").click(function () {
$("#div1").fadeToggle();
});
$("#btnfadeto").click(function () {
$("#div1").fadeTo("slow",0.5);
})
</script>
</html>
3、上滑/下滑
slideup():上滑
将设置的高度从初始变为0,然后隐藏它
slidedown():下滑
将设置的高度从0变为初始
slideToggle():下滑和上滑的切换
如果元素是隐藏的,则先显示,后把它的高度增加
如果元素是显示的,现将高度减为0,再隐藏它。
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title></title>
<script src="../jquery-3.2.1.min.js"></script>
<style>
#div1{
width: 1000px;
height: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btnSlideup">上滑</button>
<button id="btnSlideDown">下滑</button>
<button id="btnSlideToggle">切换</button>
</body>
<script>
$("#btnSlideup").click(function () {
$("#div1").slideUp(5000/*function () {
alert("上滑了");
}*/);
});
$("#btnSlideDown").click(function () {
$("#div1").slideDown(5000);
});
$("#btnSlideToggle").click(function () {
$("#div1").slideToggle(5000);
})
</script>
</html>
4、动画
$("#btn").click(function () {
//设置多个CSS属性
/* $("#div1").animate({left:'200px',top:'300'});*/
//设置相关属性
$("#div1").animate({
left:'300px',
width: '+=100px',
height: '+=100px',
opacity: '0.5'
})
});
改变预定义值来实现我们所需要的内容的显示或隐藏
$("#div1").animate({
width: 'toggle'
})
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div style="width: 200px;height: 200px;background-color: blue"></div>
</body>
<script>
$("#start").click(function () {
$("div").animate({height:'500px'},"slow")
$("div").animate({width:'500px'},"slow")
$("div").animate({height:'200px'},"slow")
$("div").animate({width:'200px'},"slow")
})
$("#stop").click(function () {
$("div").stop(true);
})
</script>
.animate()中有三个参数:
第一个参数是需要改变的样式
第二个参数是显示的速度(slow,fast,毫秒数)
第三个参数是回调函数
5、结束动画
动画在进行的过程中是可以停止的
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div style="width: 200px;height: 200px;background-color: blue"></div>
</body>
<script>
$("#start").click(function () {
$("div").animate({height:'500px'},"slow")
$("div").animate({width:'500px'},"slow")
$("div").animate({height:'200px'},"slow")
$("div").animate({width:'200px'},"slow")
})
$("#stop").click(function () {
$("div").stop();
})
</script>