jQuery动画：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<div></div>
</body>
1.jQuery.show()和jQuery.hide() 显示与隐藏
<script>
/* 1.jQuery.show()和jQuery.hide() 显示与隐藏
a.不传参数，没有动画效果，show()：直接显示 hide()：直接隐藏，比较常用
b.show(speed)和hide(speed)
speed:动画的持续时间 ，可以是毫秒值 ，还可以是固定字符串
fast:200ms normal:400ms slow:600ms
c.show([speed], [callback])和hide([speed],[ callback])
[ ]中括号表示可选择参数，并非表示数组
callback: 回调函数 */
$(function () {
$("input").eq(0).click(function () {
$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})
});
$("input").eq(1).click(function () {
$("div").hide();
})
});
</script>
2.滑入滑出动画
<script>
$(function () {
//滑入（slideDown） 滑出：slideU
// jQuery.slideDown()滑入动画:从上往下显示
// jQuery.slideUp()滑出动画:从下往上隐藏
// jQuery.slideToggle()如果是滑入状态，就执行滑出的动画，如果是滑出状态，则不操作
// 用法和jQuery.show()和jQuery.hide()用法一样，
// 不同是如果不传speed参数，默认为normal
$("input").eq(0).click(function () {
$("div").slideDown(1000, function () {
console.log("额呵呵");
});
});
$("input").eq(1).click(function () {
$('div').slideUp();
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();
})
});
</script>
3.淡入淡出动画
<script>
$(function () {
//淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
//jQuery.fadeIn()淡入动画
//jQuery.fadeOut()淡出动画
//jQuery.fadeToggle()如果是淡入状态，就执行淡出动画，如果为淡出状态，则不操作
//用法和jQuery.show()和jQuery.hide()用法一样，
//不同是如果不传speed参数，默认为normal
$("input").eq(0).click(function () {
$("div").fadeIn(2000);
});
$("input").eq(1).click(function () {
$("div").fadeOut(1000);
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').fadeToggle();
})
});
</script>
4.自定义动画
jQuery.animate(json,speed,easing, callback);
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
#box2 {
background-color: blue;
margin-top: 150px;
} #box3 {
background-color: yellowgreen;
margin-top: 300px;
}
</style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
//第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数
$("#box1").animate({left:800}, 8000);
//swing:秋千 摇摆
$("#box2").animate({left:800}, 8000, "swing");
//linear:线性 匀速
$("#box3").animate({left:800}, 8000, "linear", function () {
console.log("hahaha");
});
})
});
</script>
</body>
</html>