文章目录
三组基本动画
show不传参数，没有动画效果
$("div").show();
show(speed)
speed:动画的持续时间 可以是毫秒值 还可以是固定字符串
fast:200ms normal:400ms slow:600
$("div").show("ddd");
动画展示
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
// show([speed], [callback])
$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})
});
$("input").eq(1).click(function () {
$("div").hide();
})
});
</script>
</body>
</html>
1、滑入滑出动画
- 滑入（slideDown）
- 滑出：slideU
<!DOCTYPE html>
<html lang="zh-CN">
<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="隐藏">
<input type="button" value="来来回回">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//滑入（slideDown） 滑出：slideU
$("input").eq(0).click(function () {
//slideDown：如果不传参数，有一个默认值normal
//$("div").slideDown();
//$("div").slideDown(1000);
$("div").slideDown(1000, function () {
console.log("乌拉拉");
});
});
$("input").eq(1).click(function () {
$("div").slideUp(2000, function () {
console.log("我滑走了 哈哈哈 这句话打印用两秒")
});
})
$("input").eq(2).click(function () {
$('div').slideUp(1000);
$("div").slideDown(2000, function () {
console.log("我滑走又回来了 哈哈哈 这句话打印用两秒")
});
})
$("input").eq(3).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();
})
});
</script>
</body>
</html>
2、淡入淡出动画
- 淡入：fadeIn
- 淡出：fadeOut
- 切换：fadeToggle （如果是滑入状态，就执行滑出的动画，反之一样）人家就是这样用的 你别犟 这就是个封装好的方法，不用管别的 我天
<!DOCTYPE html>
<html lang="zh-CN">
<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="隐藏">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
$("input").eq(0).click(function () {
$("div").fadeIn(2000);
});
$("input").eq(1).click(function () {
$("div").fadeOut(1000);
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').fadeToggle();
})
});
</script>
</body>
</html>
3、自定义动画
animate（）
- 第一个参数：对象，里面可以传需要动画的样式
- 第二个参数：speed 动画的执行时间
- 第三个参数：动画的执行效果
- 第四个参数：回调函数
<!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>
动画队列
把这些动画存储到一个动画队列里面，构成一组动画，来完成一套动作
animate（）. animate()
<!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;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#btn").click(function () {
//把这些动画存储到一个动画队列里面
$("div").animate({left:800})
.animate({top:400})
.animate({width:300,height:300})
.animate({top:0})
.animate({left:0})
.animate({width:100,height:100})
})
});
</script>
</body>
</html>
停止动画
三种方法：
- stop:停止当前正在执行的动画
- clearQueue:是否清除动画队列 true false
- jumpToEnd:是否跳转到当前动画的最终效果 true false
.stop().animate();
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
$("div").slideDown(4000).slideUp(4000);
});
$("input").eq(1).click(function () {
// stop:停止当前正在执行的动画
// clearQueue:是否清除动画队列 true false
// jumpToEnd:是否跳转到当前动画的最终效果 true false
//.stop().animate();
$("div").stop(true, true);
})
});
</script>
</body>
</html>