基本动画 show hide toggle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本动画</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style>
.box{
height: 200px;
width: 200px;
margin: 10px;
background: #ff6700;
display: none;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>开关式动画</button>
<div class="box"></div>
<script type="text/javascript">
$(function () {
// 显示
$("button").eq(0).click(function () {
// show(动画时间,fn)
// normal 400ms slow 600ms fast 200ms 也可以是时间 单位毫秒
// fn 回调函数 动画结束后执行回调函数
$(".box").show('slow',function () {
// text() 在当前标签写入文本
$(this).text("加载完成!")
})
});
// 隐藏
$("button").eq(1).click(function () {
// hide(动画时间,fn)
// normal 400ms slow 600ms fast 200ms
// fn 回调函数
$(".box").hide('fast',function () {
console.log('over!');
})
});
// 开关式动画 自动检测动画的开关动态 从而作出关开动作
$('button').eq(2).click(function () {
// 如果在开始新的动画之前不将之前的动画效果清除,会导致动画排队。所以在动画之前需要stop
$('.box').stop().toggle(2000);
})
})
</script>
</body>
</html>
卷帘门动画 slideDown slideUp slideToggle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>卷帘门动画</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style>
.box{
height: 200px;
width: 200px;
margin: 10px;
background: #ff6700;
display: none;
}
</style>
</head>
<body>
<button id="slideDown">卷帘门下拉</button>
<button id="slideUp">卷帘门上拉</button>
<button id="slideToggle">开关式卷帘门</button>
<div class="box"></div>
<script type="text/javascript">
$(function () {
// 卷帘门下拉
$("#slideDown").click(function () {
$('.box').slideDown()
});
// 卷帘门上拉
$("#slideUp").click(function () {
$('.box').slideUp()
});
// 开关式卷帘门 自动检测动画的开关动态 从而作出关开动作
$('#slideToggle').click(function () {
$('.box').stop().slideToggle()
})
})
</script>
</body>
</html>
淡入淡出 fadeIn fadeOut fadeToggle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style>
.box{
height: 200px;
width: 200px;
margin: 10px;
background: #ff6700;
display: none;
}
</style>
</head>
<body>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadeToggle">开关式淡入淡出</button>
<div class="box"></div>
<script type="text/javascript">
$(function () {
// 淡入
$("#fadeIn").click(function () {
$('.box').fadeIn(1000)
});
// 淡出
$("#fadeOut").click(function () {
$('.box').fadeOut(1000)
});
// 开关式淡入淡出 自动检测动画的开关动态 从而作出关开动作
$('#fadeToggle').click(function () {
$('.box').stop().fadeToggle(1000)
})
})
</script>
</body>
</html>
自定义动画 animate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<button>动画吧</button>
<div></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//jquery入口函数
$(function () {
// animate({队列的属性},time,fn)
var attr={
"height":200,
'width':200,
'top':200,
'left':500,
'border-radius':200
};
var attr2={
"height":0,
'width':0,
'top':0,
'left':1000
};
$('button').click(function () {
$('div').stop().animate(attr,2000,function () {
$('div').stop().animate(attr2,1000)
});
});
})
</script>
</body>
</html>
二级菜单实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: #ff6700;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三级菜单1</a>
<ul>
<li><a href="javascript:void(0);">三级菜单2</a></li>
<li><a href="javascript:void(0);">三级菜单3</a></li>
<li><a href="javascript:void(0);">三级菜单4</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$('.wrap>ul>li').mouseenter(function () {
$('.wrap>ul>li').eq($(this).index()).children('ul').stop().slideDown('slow');
});
$('.wrap>ul>li').mouseleave(function () {
$('.wrap>ul>li').eq($(this).index()).children('ul').stop().slideUp('slow');
})
})
</script>
</body>
</html>