01-jq-动画-下拉菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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-image: url(images/bg.jpg);
}
.wrap li {
background-image: url(images/libg.jpg);
}
.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 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>
<script>
$(function () {
// 找到一级菜单的a做鼠标移入和移出事件
const $aes = $('.wrap>ul>li>a')
// 鼠标移入事件:mouseenter
$aes.mouseenter(function () {
// this是具体的a元素
// console.log(this)
// 让自己的兄弟:ul显示出来
$(this).next().slideDown()
}).mouseleave(function () {
// 让自己的兄弟:ul收起来
$(this).next().slideUp()
})
})
</script>
</body>
</html>
示例:
02-jq-动画-淡入淡出效果-fadeIn()
-fadeOut()
-fadeToggle()
-fadeTo()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button class="btn1">显示</button>
<button class="btn2">隐藏</button>
<button class="btn3">转换</button>
<button class="btn4">渐进控制</button>
<div class="box"></div>
<script>
$(function () {
const $box = $('.box')
// 淡入淡出效果:本质是透明度在改变
// 自带动画效果:默认是normal,400ms内完成
// 淡入效果:fadeIn()显示
$('.btn1').click(function () {
$box.fadeIn()
})
// 淡出效果:fadeOut()隐藏
$('.btn2').click(function () {
// $box.fadeOut()
// 如何实现先淡出,后加效果,再淡入
$box.fadeOut(function () {
$box.css('backgroundColor', 'green').fadeIn()
})
})
// 转换效果:fadeToggle()
$('.btn3').click(function () {
$box.fadeToggle()
})
// 控制到指定级别的透明度:fadeTo(速度,指定透明度)
$('.btn4').click(function () {
$box.fadeTo('slow', .4, function () {
$box.css({ backgroundColor: 'green' })
$box.fadeTo('slow', 1)
})
})
})
</script>
</body>
</html>
注意:
1. // 淡入淡出效果:本质是透明度在改变
// 自带动画效果:默认是normal,400ms内完成
2.淡入效果:fadeIn()显示
2.1.淡出效果:fadeOut()隐藏
2.2.切换效果:fadeToggle()
3.控制到指定级别的透明度:fadeTo(速度,指定透明度)
03-jq-动画-自定义动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<button class="btn1">向右移动到400</button>
<button class="btn2">向左移动到0</button>
<button class="btn3">变成圆</button>
<button class="btn4">同步执行</button>
<div class="box"></div>
<script>
$(function () {
const $box = $('.box')
$('.btn1').click(function () {
// 向右移动到本质:left属性
// $box.css({ left: 400 })
$box.animate({ left: 400 })
})
$('.btn2').click(function () {
$box.animate({ left: 0 })
})
$('.btn3').click(function () {
$box.animate({ borderRadius: '50%' })
})
$('.btn4').click(function () {
$box.animate({
borderRadius: '50%',
left: 400,
width: 200,
height: 200,
backgroundColor: 'green' // 背景色没有提供动画效果
})
// 正方形移动
$box.animate({
top: 400
})
$box.animate({
left: 0
})
$box.animate({
top: 100,
width: 100,
height: 100,
borderRadius: '0%'
})
})
})
</script>
</body>
</html>
示例: