一、show()方法和hide()方法
1.show()与hide()
show():根据hide()方法记住的display属性值来显示元素。
hide() : 将该元素的display样式改为 “none”。
//用如下代码隐藏element元素
$("element").hide();
//与用css()的方法设置display属性效果相同
$("element").css("display","none");
2当把元素隐藏后,可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其它除了"none"之外的值)
$("element").show();
hide() 和 show() 分别可以携带两个可选参数,一个是speed参数另外一个是callback参数。
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">
我是一个div标签</div>
<button class="show">显示效果</button>
<button class="hide">隐藏效果</button>
<script>
// 动画显示元素
$(".show").click(function () {
$("div").show(1000, function () {
console.log("div动画显示完成");
});
});
// 动画隐藏元素
$(".hide").click(function () {
$("div").hide(1000, function () {
console.log("div动画隐藏完成");
});
});
</script>
</body>
toggle()方法
我们可以使用 toggle() 方法来切换 hide() 和 show() 方法。
<body>
<div style="width: 200px; height: 200px; background-color: yellow;">
我是一个div标签</div>
<button class="toggle">显示隐藏切换效果</button>
<script>
// 切换显示或隐藏元素
$(".toggle").click(function () {
$("div").toggle(1000, function () {
console.log("切换完毕");
});
});
</script>
</body>
slideUp()方法和slideDown()方法
slideUp()方法和slideDown()方法只会改变元素的高度
fadeIn()方法和fadeOut()方法
与show()方法不同的是,fadeIn()方法和fadeOut()方法只改变元素的不透明度
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="fullPage/CSS/jquery.fullPage.css" />
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="fullPage/JS/jquery.fullPage.min.js"></script>
<title>Document</title>
<style>
#content #first {
color:white;
background-color:green;
width:240px;
height:100px;
margin:10px 0 0 0;
padding:10px;
}
</style>
</head>
<body>
<body>
<div id="content">
<input id="testhide" type="button" value="隐藏">
<input id="testshow" type="button" value="显示">
<input id="testtoggle" type="button" value="隐藏/显示">
<input id="testslideup" type="button" value="上滑隐藏">
<input id="testslidedown" type="button" value="下滑显示">
<input id="testslidetoggle" type="button" value="上/下滑显示">
<input id="testfadein" type="button" value="淡入显示">
<input id="testfadeout" type="button" value="淡出显示">
<input id="testfadetoggle" type="button" value="淡入/出显示">
<input id="testanimate" type="button" value="自定义显示">
<div id="first">
小样就是这个样
</div>
</div>
</body>
<script>
$(document).ready(function() {
$("#testhide").click(function() {
// 动画效果
$("#first").hide("slow");
});
$("#testshow").click(function() {
// 动画效果
$("#first").show("slow");
});
$("#testtoggle").click(function() {
// 动画效果
$("#first").toggle("slow");
});
$("#testslideup").click(function() {
// 动画效果
$("#first").slideUp("slow");
});
$("#testslidedown").click(function() {
// 动画效果
$("#first").slideDown("slow");
});
$("#testslidetoggle").click(function() {
// 动画效果
$("#first").slideToggle("slow");
});
$("#testfadein").click(function() {
// 动画效果
$("#first").fadeIn("slow");
});
$("#testfadeout").click(function() {
// 动画效果
$("#first").fadeOut("slow");
});
$("#testfadetoggle").click(function() {
// 动画效果
$("#first").fadeToggle("slow");
});
$("#testanimate").click(function() {
// 动画效果
$("#first").animate({
fontSize: "12px"
}, "slow");
});
});
</script>
</body>
</html>
自定义动画方法animate()
在jQuery中,可以使用animate()方法来自定义动画
animate()的语法结构为:animate(params,speed,callback)
1params:一个包含样式属性及值的映射速度
2speed:参数,可选
3callback:在动画完成时执行的函数
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
});
累加、累减动画
$(function(){
$("#panel").click(function(){
$(this).animate({left:"+=500px"},300);
});
/*加上"+="或者"-="符号即表示在当前位置累加或者累减*/
})
多重动画
同时执行多个动画
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px",height:"200px"},3000);
});
/*运行代码后,<div>元素在向右滑动的同时,也会放大高度*/
})
按顺序执行多个动画
如果想要按照顺序执行动画,只需要把代码按照顺序就可以
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000)
})
})
因为animate()方法都是对同一个jQuery对象进行操作,所以也可以改为链式写法
动画效果的执行具有先后顺序,称为"动画队列"
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000)
.animate({height:"200px"},3000);
})
})