jQuery动画
- 通过jQuery动画方法,能够很轻松地为网页添加非常精彩的视觉效果,给用户一种全新体验
- 动画分类
- 显示、隐藏
- 滑动、卷动
- 淡入、淡出
- 自定义动画
显示
show(毫秒, 完成回调函数)
隐藏
hide(毫秒, 完成回调函数)
切换
toggle(毫秒, 完成回调函数)
案例
两侧浮动广告显示或者隐藏控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ad {
background: url("images/ad.png") no-repeat;
width: 150px;
height: 300px;
position: fixed;
top: 50%;
margin-top: -150px;
}
.close {
width: 16px;height: 16px;
position: absolute;top: 10px;
right: 10px;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="ad left">
<img class="close" src="images/close.png">
</div>
<div class="ad right">
<img class="close" src="images/close.png">
</div>
<button class="toggle">显示或隐藏</button>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$('.close').click(function () {
// 1, 父标签隐藏
$(this).parent().hide(1000, function () {
console.log('隐藏完成');
});
});
$('.toggle').click(function () {
$('.ad').toggle(2000, function () {
console.log('切换完成');
})
});
});
</script>
</body>
</html>
知识点
在body上添加点击事件之后，如果要在body内部某div添加点击事件，需要阻止冒泡。
event.stopPropagation();
核心代码
展开
slideDown(毫秒, 完成回调函数)
收起
slideUp(毫秒, 完成回调函数)
切换
slideToggle(毫秒, 完成回调函数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {padding: 0;margin: 0;}
.box {
width: 646px;
height: 363px;
margin: 100px auto;
border: 1px solid orange;
position: relative;
overflow: hidden;
}
.box p {
width: 100%;
height: 100%;
text-align: center;
line-height: 360px;
}
.left {
background: url("images/weiman_left.jpg") no-repeat;
width: 343px;
height: 363px;
position: absolute;
top: 0;
left: 0;
}
.right {
background: url("images/weiman_right.jpg") no-repeat;
width: 303px;
height: 363px;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<p>看什么看,关上!</p>
<div class="wm left"></div>
<div class="wm right"></div>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 身体
$('body').click(function () {
$('.wm').slideToggle(1000);
});
// 左边
$('.left').click(function (event) {
// 阻止冒泡
event.stopPropagation();
$(this).slideUp(1000);
});
// 右边
$('.right').click(function (event) {
// 阻止冒泡
event.stopPropagation();
$(this).slideUp(1000);
});
});
</script>
</body>
</html>
参数备注
body背景颜色 #909EAB
导航
宽度900 高度44 颜色#ccc
按钮选中颜色
jQuery展开&收起动画案例-下拉菜单-业务实现#666
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-jQuery展开&收起动画案例-下拉菜单-界面搭建</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.firstNav {
width: 600px;
height: 44px;
margin: 100px auto;
border: 1px solid #cccccc;
cursor: pointer;
}
.firstNav>li {
width: 100px;
float: left;
text-align: center;
}
.firstNav>li>span {
display: inline-block;
width: 100%;
height: 44px;
line-height: 44px;
}
.secondNav {
border: 1px solid #cccccc;
border-top: none;
}
.secondNav>li {
margin-top: 1px;
}
.secondNav {
display: none;
}
.current .secondNav {
display: block;
}
</style>
</head>
<body>
<ul class="firstNav">
<li class="current">
<span>一级菜单1</span>
<ul class="secondNav">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
<li>
<span>一级菜单1</span>
<ul class="secondNav">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
<li>
<span>一级菜单1</span>
<ul class="secondNav">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
<li>
<span>一级菜单1</span>
<ul class="secondNav">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
<li>
<span>一级菜单1</span>
<ul class="secondNav">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
<li>
<span>一级菜单1</span>
<ul class="secondNav">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
<li>二级菜单4</li>
<li>二级菜单5</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 1. 先让第一个二级菜单隐藏
$('.firstNav>li.current .secondNav').css('display', 'none');
// 2. 监听鼠标进入
/* $('.firstNav>li').hover(function () {
$(this).children('.secondNav').slideDown(200);
}, function () {
$(this).children('.secondNav').slideUp(200);
})*/
$('.firstNav>li').hover(function () {
$(this).children('.secondNav').stop().slideToggle(200);
});
});
</script>
</body>
</html>
注意问题:
动画队列
解决方案
开始动画之前先停止之前动画队列中的动画
stop()
$(this).children(".secondNav").stop().slideToggle();
end()
选择调用链上一级
addBack()
额外添加调用链上一级
children()
返回儿子节点(被包装成jQuery对象)
find()
从后代节点进行查找(被包装成jQuery对象)
案例演示
通过3层 div 来演示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1 {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid red;
background: red;
}
.box2 {
width: 200px;
height: 200px;
border: 1px solid green;
background: green;
}
.box3 {
width: 100px;
height: 100px;
border: 1px solid yellow;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// $('.box3').css('background', 'orange');
// $('.box3').parent().css('background', 'cyan');
// $('.box2').parent().addBack().css('background', 'cyan');
$('.box1').find('.box3').css('background', 'cyan');
});
</script>
</body>
</html>
三秒钟之后消失效果
闪烁效果
核心代码
jQuery淡入淡出动画
-
fadeIn(速度, 完成回调)
速度
毫秒 （比如 1500）
“slow”
“normal”
“fast” -
fadeOut(速度, 完成回调)
速度
毫秒 （比如 1500）
“slow”
“normal”
“fast” -
fadeTo(速度,透明度数值, 完成回调)
透明度值
0 — 0.5
速度
毫秒 （比如 1500）
“slow”
“normal”
“fast” -
fadeToggle(速度)
速度
毫秒 （比如 1500）
“slow”
“normal”
“fast”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ad{
background: url("images/ad-pic.png") no-repeat;
width: 300px;
height: 194px;
position: fixed;
right: 10px;
bottom: 10px;
display: none;
}
.close{
width: 20px;
height: 20px;
position: absolute;
top: 2px;
right: 5px;
background-color: transparent;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ad">
<div class="close"></div>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 1. 设置定时器
var opacity = 0.3;
var timer = setInterval(function () {
opacity = opacity === 1 ? 0.3 : 1;
$('.ad').fadeTo(1000, opacity);
}, 1000);
// 2. 关闭
$('.close').click(function () {
// 2.1 清除定时器
clearInterval(timer);
// 2.2 滑动
$(this).parent().stop(true).slideUp(1000);
});
});
</script>
</body>
</html>
简介
jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法 满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建我们的自定义动画,满足更多复杂多变的要求。
语法
$(selector).animate({params},speed,callback);
参数
params:必须参数,定义形成动画的 CSS 属性。
speed:可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。
callback: 参数是动画完成后所执行的函数名称。
使用
-
操作多个属性
代码$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });注意:一个 CSS 变化就是一个动画效果,上面的例子中,已经有四个 CSS 变化,已经 实现了多重动画同步运动的效果。
2.使用相对值
代码$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });可以在上一个值的基础上进行累加.
3.使用预定义的值
代码$("button").click(function(){ $("div").animate({ height:'toggle' }); });可以把属性的动画值设置为 “show”、“hide” 或 "toggle”
4.通过连缀或者顺序来实现列队动画
顺序写法$("button").click(function(){ var div=$("div"); div.animate({height:‘300px’,opacity:‘0.4’},“slow”); div.animate({width:‘300px’,opacity:‘0.8’},“slow”); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });连缀写法
$("button").click(function(){ var div=$("div"); div.animate({height:‘300px’,opacity:‘0.4’},“slow”).animate({width:‘300px’,opacity:‘0.8’},“slow”).animate({height:'100px',opacity:'0.4'},"slow”).animate({width:'100px',opacity:'0.8'},"slow”); });5.停止动画
语法stop(clearQueue, gotoEnd)第一个参数:是否清空动画队列.
默认false
第二个参数:是否显示到当前动画最后位置
默认false
示例stop(false) 停止当前动画,后续队列中的动画继续执行 stop(true) 止当前动画,并清空后续队列中的所有动画 stop(false,true)当前动画立即执行完毕,后续队列中的动画继续执行 stop(true,true)当前动画立即执行完毕,并清空后续队列中的所有动画6.延时动画
解释
有时在执行动画或列队动画时,需要在运动之前有延迟执行,jQuery 为此提供了.delay() 方法。这个方法可以在动画之前设置延迟,也可以在列队动画中间加上
示例$('div’).animate({height:300}).delay(1000).animate({width:300});
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;
height: 200px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box"></div>
<p></p>
<p></p>
<button>开始自定义动画</button>
<button>结束自定义动画</button>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var $btn = $('button');
var $box = $('.box');
// 1. 监听点击
$btn.eq(0).click(function () {
$box.animate({
'width': '500px',
'margin-left': '500px'
}, 1000, function () {
console.log('动画结束')
});
$box.delay(3000).animate({
'height': '1000px'
}, 1000, function () {
console.log('动画结束')
})
});
$btn.eq(1).click(function () {
$('.box').stop(true, false)
});
});
</script>
</body>
</html>
备注
easing
linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine， easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce.
默认只提供了两个过渡效果
如果需要更多, 可以下载相应插件
https://matthewlein.com/experiments/easing.html
http://gsgd.co.uk/sandbox/jquery/easing/
遍历数组
遍历对象
只支持静态方法调用
遍历伪数组
- 有length属性
- 有length值-1属性
遍历节点
细节
- 支持两种调用方式
静态方法
对象方法 - 支持遍历终止
return false; - this
代表值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 1. 遍历数组
/* var arr = ['a', 'b', 'c', 'd'];
$.each(arr, function (index, value) {
console.log(index, value);
if(index === 1){
return false;
}
});
$(arr).each(function (index, value) {
console.log(this);
});*/
// 2. 遍历对象
var obj = {
'name': '撩课学院',
'intro': '喜欢IT, 就上撩课(itlike.com)'
};
/*$.each(obj, function (key, value) {
console.log(key + "----" + value);
});*/
/*$(obj).each(function (key, value) {
console.log(key + "----" + value);
})*/
// 3. 伪数组
var fadeArray = {'0': '张三', '1': 18, 'length': 2};
// console.log($(fadeArray));
$.each(fadeArray, function (index, value) {
console.log(index, value);
});
$(fadeArray).each(function (index, value) {
console.log(this);
});
$('li').each(function (index, value) {
console.log(index, value);
});
$.each($('li'), function (index, value) {
console.log(index, value);
})
});
</script>
<ul>
<li>哈哈哈哈或</li>
<li>哈哈哈哈或</li>
<li>哈哈哈哈或</li>
<li>哈哈哈哈或</li>
<li>哈哈哈哈或</li>
<li>哈哈哈哈或</li>
</ul>
</body>
</html>
