显示，隐藏
hide(), show(), toggle()
淡入淡出
fadeIn(), fadeOut(), fadeToggle(), fadeTo()
~~~
$(function(){
$("#btn_toggle").click(function(){
//$("#div1").fadeToggle();
//$("#div1").fadeToggle("slow");
//第二个参数是回调函数，动画完成会自动调用回调函数
/* $("#div1").fadeToggle(5000,function(){
console.log("haha");
}); */
$("#div1").fadeToggle(function(){
console.log("hehe");
});
});
})
~~~
练习-》商品信息折叠
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(function(){
$("#checkdetail").click(function(){
$("#desc").slideToggle(function(){
if($("#checkdetail").html() == "查看详细信息")
{
$("#checkdetail").html("收起详细信息");
}
else
{
$("#checkdetail").html("查看详细信息");
}
});
});
})
</script>
<style>
*
{
margin:0px;
}
#desc
{
display:none;
margin-bottom:16px;
}
#p1
{
margin-top:16px;
margin-bottom:16px;
}
</style>
</head>
<body>
<p id="p1">百搭打底衫</p>
<div id="desc">
<p>商品描述</p>
<p>商品描述</p>
<p>商品描述</p>
<p>商品描述</p>
</div>
<p id="checkdetail">查看详细信息</p>
</body>
</html>
~~~
jquery动画
~~~
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},3000);
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#96bf21;height:100px;width:100px;position:relative;">
</div>
</body>
</html>
~~~
~~~
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
~~~
使用animate()注意：
1. font-size: fontSize
2. 连续执行多个动画时，自动排序进行，不会同时执行
练习-》 让div顺时针旋转一周
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(function(){
$("#btn_animate").click(function(){
//执行动画
//1. 向右
//$("#div1").animate({left:'+=400px'});
//$("#div1").animate({top:'+=400px'});
//$("#div1").animate({left:'-=400px'});
//$("#div1").animate({top:'-=400px'});
$("#div1").animate({left:'400px'});
$("#div1").animate({top:'400px'});
$("#div1").animate({left:'0px'});
$("#div1").animate({top:'0px'});
});
})
</script>
<style>
#div1
{
width:100px;
height:100px;
background-color:red;
position:relative;
}
</style>
</head>
<body>
<button id="btn_animate">开始动画</button>
<div id="div1"></div>
</body>
</html>
~~~
作业： 下拉效果
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//判断btn内容
if($("#btn").html() == "+")
{
$("#c").animate({top:'0px'},function(){
//+》x
$("#btn").html("x");
});
}
else
{
$("#c").animate({top:'-200px'},function(){
//+》x
$("#btn").html("+");
});
}
});
})
</script>
<style>
*
{
margin:0px;
}
#p
{
position:relative;
}
#c
{
width:100%;
height:200px;
background:red;
position:absolute;
top:-200px;
left:0px;
}
#btn
{
font-size: 60px;
position:absolute;
top:0px;
right:0px;
}
</style>
</head>
<body>
<div id="p">
<div id="c"></div>
<div id="btn">+</div>
</div>
</body>
</html>
~~~
动画练习，右推效果：
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(function(){
$("#bars").click(function(){
if($("#wrapper").css("left") == '0px')
{
//变成-50%
$("#wrapper").animate({left:'-50%'});
}
else
{
//变成0px;
$("#wrapper").animate({left:'0px'});
}
});
})
</script>
<style>
#wrapper
{
width:150%;
height:800px;
position:fixed;
left:-50%; /* 百分比是参照父级元素的宽度 */
top:0px;
}
#left{
float:left;
width:33.33%;
height:100%;
background:red;
}
#right
{
float:left;
width:66.66%;
height:100%;
}
p
{
font-size: 40px;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<p id="bars"><i class="fa fa-bars" aria-hidden="true"></i></p>
</div>
</div>
</body>
</html>
~~~
