- 三组基本动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
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不传参数，没有动画效果
//$("div").show();
//show(speed)
//speed:动画的持续时间 可以是毫秒值 还可以是固定字符串
//fast:200ms normal:400ms slow:600
//$("div").show("ddd");
// show([speed], [callback])
$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})
});
$("input").eq(1).click(function () {
$("div").hide();
})
});
</script>
</body>
</html>
滑入滑出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
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 () {
//滑入（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();
})
$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();
})
});
</script>
</body>
</html>
淡入淡出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
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>
下拉菜单案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li {
background-image: url(imgs/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//mouseover：鼠标经过事件
//mouseout:鼠标离开事件
//mouseenter:鼠标进入事件
//mouseleave：鼠标离开事件
var $li = $(".wrap>ul>li");
//给li注册鼠标经过事件，让自己的ul显示出来
$li.mouseenter(function () {
//找到所有的儿子，并且还得是ul
//stop：停止当前正在执行的动画
$(this).children("ul").stop().slideDown();
});
$li.mouseleave(function () {
$(this).children("ul").stop().slideUp();
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
轮播图案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>京东商城</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
790px;
margin: 100px auto;
position: relative;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="images/8.jpg" alt=""></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var count = 0;
$(".arrow-right").click(function () {
count++;
if(count == $(".slider li").length){
count = 0;
}
console.log(count);
//让count渐渐的显示，其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
$(".arrow-left").click(function () {
count--;
if(count == -1){
count = $(".slider li").length - 1;
}
console.log(count);
//让count渐渐的显示，其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
})
});
</script>
</body>
</html>
- 自定义动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
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>
手风琴案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
1300px;
}
#box {
1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
}
#box li {
240px;
height: 400px;
/*border: 1px solid #000;*/
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
var $li = $("#box li");
for (var i = 0; i < $li.length; i++) {
$li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
}
//给所有的li注册鼠标经过事件
$li.mouseenter(function () {
$(this).stop().animate({800}).siblings().stop().animate({100});
}).mouseleave(function () {
$li.stop().animate({240});
});
});
</script>
</body>
</html>
动画队列
$(function () {
$("#btn").click(function () {
//把这些动画存储到一个动画队列里面
$("div").animate({left:800})
.animate({top:400})
.animate({300,height:300})
.animate({top:0})
.animate({left:0})
.animate({100,height:100})
})
});
停止动画操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
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>