2.隐藏、显示、渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border:1px solid red;
display: none;
}
#box1{
width: 100px;
height: 100px;
border:1px solid red;
background: yellow;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
<button id="btn">显示</button>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
<button id="btn5">btn5</button>
<button id="btn6">btn6</button>
<button id="btn7">btn7</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
/* jQuery 提供了一些方法 show() hide() 控制元素显示隐藏
show
概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
callback:在动画完成时执行的函数，每个元素执行一次
hide
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。
可以通过show（）和hide（）方法，来动态控制元素的显示隐藏*/
var isShow = true;
$('#btn').click(function () {
if(isShow){
$('#box').show('slow',function () {
$(this).text('盒子出来了');
});
$(this).text('隐藏');
isShow = false;
}else {
$('#box').text('盒子正在消失');
$('#box').hide(2000,function () {});
$(this).text('显示');
isShow = true;
}
});
/*toggle
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。同时也可回调函数*/
$('#btn1').click(function () {
$('#box').toggle(3000,function () {
alert("哈哈")
})
});
/*slideDown
概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数
用法和参数跟上面类似
slideUp
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
用法和参数跟上面类似*/
$('#btn2').hover(function () {
$('#box').slideDown(2000);
},function () {
$('#box').slideUp(2000);
});
/*
slideToggle
概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
跟toggle用法类似*/
$("#btn3").click(function () {
$('#box').slideToggle('fast');
});
/*fadeIn
概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画调整元素的不透明度，所有匹配的元素的高度和宽度在渐变中不会发生变化,直到最后元素消失*/
$('#btn4').mouseover(function () {
$('#box1').fadeOut(2000);
});
/*fadeOut
概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画调整元素的不透明度，所有匹配的元素的高度和宽度在渐变中不会发生变化(如果最开始透明度为0是就被隐藏了)。*/
$('#btn5').mouseout(function () {
$('#box1').fadeIn(2000);
});
/*fadeTo
概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化(透明度为0也不会发生变化)。*/
$('#btn6').mouseover(function () {
$('#box1').fadeTo(2000,0.1);
});
/*fadeToggle (用的很多)
概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
实现淡入淡出的效果就是使用此方法*/
$('#btn7').click(function () {
$('#box1').fadeToggle(3000);
})
})
</script>
</html>
3.动画
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border:1px solid red;
background: yellow;
position: absolute;
}
</style>
</head>
<body>
<button id="btn">动画吧</button>
<button id="stop">停止吧</button>
<div id="box">
hello luffy
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/*animate
概念：用于创建自定义动画的函数
语法：animate(params,[speed],[fn])
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合(似乎必须使用key:value的形式)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的回调函数，每个元素执行一次。*/
$('#btn').click(function () {
//同时执行
$('#box').animate({
width:'200px',
height:'300px',
left:'100px',
top:'200px'
})
//顺序执行
$('#box').animate({left:'100px'}).animate({top:'200px'});
//添加执行时间
$('#box').animate({left:'100px',top:'200px'},5000);
//delay延迟效果
$('#box').animate({left:'100px'}).delay(2000).animate({top:'200px'});
});
//stop暂停动画效果
$("#stop").click(function () {
$("#box").stop()
})
})
</script>
</html>
4.右下角弹出小广告(案例)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>小广告</title>
<style type="text/css">
</style>
</head>
<body>
<div id="box" style="width: 500px ;height:300px;position: absolute;right: 10px;bottom: 0px;display: none;">
<img src="./images/timg.jpg" style="width: 100%;height: 100%;"/>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//链式调用
$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
$(this).fadeOut(2000);
});
})
</script>
</html>
