目录
fadeIn(),fadeOut() 和 fadeToggle()
slideDown(),slideUp() 和 slideToggle()
第一关:jQuery动画效果——隐藏/显示
相关知识
为了完成本关任务,你需要掌握:1.show()
和hide()
,2.toggle()
。
show()和hide()
前面简单地了解过show()
和hide()
,这里对它们进行一个深入的了解。
基本的html
结构如下(省略了css
样式):
<div class="box"></div>
这里先说隐藏的过程,它是慢慢隐藏的,是有时间的,这里用 hide()
就可以实现,代码如下:
$(".box").hide(2000);
这里hide()
方法的参数表示这个动画执行的速度,参数的取值如下:
-
"slow"
,表示慢速度; -
"fast"
,表示快速度; -
毫秒,可自定义,上面的是
2s
。
然后,在隐藏完之后,弹出我消失了。 hide()
还可以接受一个参数callback
,是一个函数,在隐藏这个动作完成之后执行的动作。代码如下:
$(".box").hide(2000,function(){
alert("我消失了");
})
同理,show()
也可以这样操作。
toggle()
toggle()
可以切换hide()
和show()
,把隐藏的元素显示,显示的元素隐藏。
基本的html
结构如下:
<button class="toggle">toggle</button>
<div class="item"></div>
代码如下:
$(".toggle").click(function(){
$(".item").toggle();
})
同理,toggle()
也可以设置动画执行的速度和完成后执行的动作。代码如下:
$(".item").toggle("slow",function(){
alert("隐藏显示的切换");
})
这里总结一下:jQuery
自带的动画效果基本都是这样的语法(包括后面介绍到的淡入淡出和滑动):
$(selector).method(speed, callback);
解释一下:
-
selector
是要操作的元素; -
method
是jQuery
自带的动画名,比如show
,hide
,toggle
; -
speed
是动画运动的速度,参数可选,可有可无; -
callback
是这个动画完成后需要执行的动作,参数可选,可有可无。
编程要求
根据提示,在右侧编辑器Begin
至End
之间填充代码,要求如下:
-
点击隐藏按钮,橙色小框消失,速度为
slow
,完成后弹出我隐藏了
; -
点击显示按钮,橙色小框显示,速度为
"1s
,完成后弹出我显示了
; -
点击
toggle
按钮,第一次点击,橙色小框隐藏显示;第二次点击,橙色小框显示隐藏。效果来回切换,速度为"fast
,完成后弹出隐藏显示的切换
。
格式注意:
-
字符串统一用双引号
""
表示; -
点击事件直接写功能即可,即
$(selector).click(function(){})
; -
获取元素统一用类名获取。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.container {
width: 200px;
margin: 30px auto;
}
.item {
width: 170px;
height: 170px;
background: orange;
}
button {
margin: 0 10px 20px 0;
}
</style>
</head>
<body>
<div class="container">
<button class="hide">隐藏</button>
<button class="show">显示</button>
<button class="toggle">toggle</button>
<div class="item"></div>
</div>
<script>
$(function() {
//------------begin---------
$(".hide").click(function(){
$(".item").hide("slow",function(){
alert("我隐藏了");
})
});
$(".show").click(function(){
$(".item").show(1000,function(){
alert("我显示了");
})
});
$(".toggle").click(function(){
$(".item").toggle("fast",function(){
alert("隐藏显示的切换");
})
});
//-----------end------------
})
</script>
</body>
</html>
第2关:jQuery动画效果——淡入淡出
相关知识
为了完成本关任务,你需要掌握:1.fadeIn()
,2.fadeOut()
, 3.fadeToggle()
, 4.fadeTo()
5.delay()
。
fadeIn(),fadeOut() 和 fadeToggle()
前面已经总结过:jQuery
的动画语法都是一样的,只是动画名称不一样。
-
fadeIn()
相当于show()
,它的实现原理是:**透明度从0
变为1
**; -
fadeOut()
相当于hide()
,它的实现原理是:**透明度从1
变为0
**; -
fadeToggle()
相当于toggle()
,它的实现原理是:透明度的切换,透明的变为不透明,不透明的变为透明。
fadeTo()
上面的方法都是控制透明度在0
和1
之间变换,有没有可能让透明度变为一个确定的值呢? 比如0.6
, 当然是可以的。
怎么实现呢?这里介绍fadeTo()
,代码如下:
<div class="item"></div>
<script>
$(function(){
$(".item").fadeTo("slow",0.8);
$(".item").fadeTo("slow",0.6);
$(".item").fadeTo("slow",0.4);
$(".item").fadeTo("slow",0.2);
$(".item").fadeTo("slow",0,function(){
alert("我消失了");
})
})
</script>
注意:
-
fadeTo()
的前两个参数是必需的; -
第一个参数表示执行的速度,可以使用
"slow"
、"fast"
或者毫秒; -
第二个参数表示最终达到的透明度;
-
第三个参数(完成后的函数
callback
)是可选的。
这个效果是很快的,一个动画接着一个动画。现在需要实现的效果是一个动画完成后,等2s
,然后开始下一个动画。这里介绍另一个方法 delay()
,它可以延迟动画的执行时间,代码如下:
<script>
$(function(){
$(".item").delay(2000).fadeTo("slow",0.6);
$(".item").delay(2000).fadeTo("slow",0.4);
$(".item").delay(2000).fadeTo("slow",0.2);
$(".item").delay(2000).fadeTo("slow",0,function(){
alert("我消失了");
});
})
</script>
delay()
的参数是可选的,不填表示没有延迟,参数的取值如下:
-
"slow"
,表示慢速度; -
"fast"
,表示快速度; -
毫秒,可自定义延迟时间。
编程要求
根据提示,在右侧编辑器Begin
至End
之间填充代码,实现下面效果,要求如下:
-
点击【动画开始】按钮,第一张图片透明度从
1
变为0.5
,速度为2s
; -
第二张图片在延迟
2s
后,透明度也从1
变为0.5
,速度为2s
; -
两张图片一起淡出,速度为
"slow"
。 -
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .container { width: 60%; height: 260px; margin: 30px auto; } button{ margin: 100px 20px 0 0 ; float: left; } img{ width: 200px; height: 200px; float: left; margin-right: 30px; } </style> </head> <body> <div class="container"> <button class="btn">动画开始</button> <img class="first" src="https://www.educoder.net/attachments/download/206411"/> <img class="second" src="https://www.educoder.net/attachments/download/206410" /> </div> </div> <script> $(function(){ $(".btn").click(function(){ // ---------- Begin ----------- $(".first").fadeTo(2000,0.5); $(".second").delay(2000).fadeTo(2000,0.5); $(".first").delay(2000).fadeOut("slow"); $(".second").fadeOut("slow") // ---------- End ----------- }) }) </script> </body> </html>
第3关:jQuery动画效果——滑动
-
相关知识
为了完成本关任务,你需要掌握:1.
slideDown()
,2.slideUp()
,3.slideToggle()
, 4.stop()
。slideDown(),slideUp() 和 slideToggle()
前面已经总结过:
jQuery
的动画语法都是一样的,只是动画名称不一样。 -
slideDown()
是向下滑动元素,它的实现原理是:元素的高度从0
变为已有的高度; -
slideUp()
是向上滑动元素,它的实现原理是:**元素的高度从现在的高度变为0
**; -
slideToggle()
是切换滑动效果,它的实现原理是:向上滑动的变为向下滑动,向下滑动的变为向上滑动。 <button class="stop">动画停止</button>
<button class="slide">slide</button>
<div class="item">Hello jQuery!!!</div>
$(".stop").click(function(){
$(".item").stop();
})
-
当鼠标浮动到菜单时, 菜单内容向下滑动,速度为
1s
; -
当鼠标离开菜单时, 菜单内容向上滑动,速度为
1s
。
格式注意: 获取元素用类名来获取。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.menu{
width: 120px;
margin: 20px auto;
}
span{
line-height: 50px;
font-size: 20px;
margin-left: 36px;
}
.list{
width: 100px;
line-height: 18px;
border: 2px solid #888;
padding: 0 10px;
display: none;
}
</style>
</head>
<body>
<div class="menu">
<span>菜单</span>
<div class="list">
<p>新建课堂</p>
<p>新建实训</p>
<p>新建实训路径</p>
<p>新建项目</p>
</div>
</div>
<script>
$(function(){
//-------------- Begin ----------------
$(".menu").mouseenter(function(){
$(".list").slideDown(1000);
})
$(".menu").mouseleave(function(){
$(".list").slideUp(1000);
})
//-------------- End --------------------
})
</script>
</body>
</html>
第4关:jQuery动画效果——自定义动画
相关知识
为了完成本关任务,你需要掌握:1.平移动画,2.相对值,3.stop()
函数 。
基本的结构如下:
<button class="stop">动画开始</button>
<div class="item">Hello</div>
<style>
.item{
position: absolute;
left: 100px;
width: 100px;
height: 100px;
font-size: 24px;
}
</style>
平移动画
这个可以分解为两个动作:右移和左移。先说右移的情况,在右移过程中,宽度变宽了,字体变大了。
先实现往右移动,代码如下:
$(".item").animate({left: '500px'}, 2000);
说明如下:
-
移动改变的是
left
值和top
值 ,所以在样式中一定要有**定位position
**。否则,没有定位,也就没有了left
属性和top
属性,也就不能移动了; -
基本结构中的样式
left:100px
作为初始状态,往右移动的实现代码中,left:'500px'
作为这个动画的最终状态,实际上移动了400px
; -
2000
表示这个动画完成的时间,是2000
毫秒,可选的值是slow,fast,毫秒
。
现在实现整个右移过程,实现代码如下:
$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)
可以发现:就是在往右移动的代码中添加了宽度和字体,需要注意的是,这里字体font-size
的写法变成了fontSize
,是用驼峰命名法。规则如下:
-
第一个单词以小写字母开始;
-
从第二个单词开始以后的每个单词的首字母都大写。
其他属性中带有-
的,在动画中也都用驼峰命名法,比如:padding-left
变为paddingLeft
。
现在实现左移的过程就很容易了,代码如下:
$(".item").animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)
jQuery
最大的特点就是可以链式调用,这里也不例外,右移左移的过程,简写如下:
$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)
.animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)
举一反三:前面实现的动画效果和自定义动画,都是可以链式调用的,比如: $(".box").show().fadeOut().slideUp().animate({width: '100px'});
相对值
这个动画每次移动相同的距离,当然可以在现有的left
值的基础上,加上移动的距离作为一段动画的最终状态,但是这样太麻烦了,每次都得算距离,可不可以只用相对移动的距离呢?当然可以,实现代码如下:
$(".item").animate({ left: '+=200px', borderRadius: '50%'},2000)
这行代码表示向右移动的距离为200px
,在移动的过程中,从正方形变为圆 , 左移用-=
。
stop()参数
现在有一个问题:当连续点击按钮【动画开始】,在点击完后,动画还在执行(点击多少次,执行多少次),需求是把一个时间段的连续点击作为一次点击。
解决办法就是,在第一个动画执行完后,把后面等待的动画都清除掉。后面等待的动画可以看作一个队列,只要把这个队列清除就可以了。
这里用停止动画的方法stop()
,它是有两个参数的,都是可选的,参数详情如下:
-
第一个参数:是否清除动画队列,
true
表示是,false
表示否,默认是false
; -
第二个参数:是否立即完成当前动画,
true
表示是,false
表示否,默认是false
。
实现代码如下:
$(".item").stop(true,false).animate({left: '+=200px', borderRadius: '50%'}, 2000)
这里如果把stop()
的第二个参数设为true
,会发生什么情况呢?
当连续点击第二次的时候,第一次的动画会立即执行,就会出现“闪现”的情况。
总结:不知道你注意到了没有,jQuery
动画能操作的属性都是有数值的,比如:width,height,opacity,font-size,left
等。颜色、背景色是不能操作的,想用的话,有颜色动画插件,可以自己试一下。
编程要求
根据提示,在右侧编辑器Begin
至End
之间补充代码,实现点赞效果。要求如下:
-
当点击【点赞】按钮时,爱心立即显示;
-
然后爱心向上移动
120px
(用相对值),同时透明度变为0
,速度为1.5s
。
注意:
-
获取元素统一用类名获取元素;
-
字符串统一用双引号
""
表示,这里透明度0
也是要加双引号的; -
尽量用前面学到的方法;
-
用链式调用,减少DOM元素的获取。
效果如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.container{
width: 100px;
height: 200px;
margin: 20px auto;
position:relative;
}
button{
position: absolute;
left: 30px;
bottom: 10px;
}
img{
width: 30px;
height: 30px;
position: absolute;
left: 36px;
bottom: 36px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<button class="btn">点赞</button>
</div>
<script>
$(function(){
$(".btn").click(function(){
//向contianer里插入DOM元素 img 标签,每点击一次,插入一张图片。
var dom = '<img class="love" src="https://www.educoder.net/attachments/download/206509" alt="爱心">';
$(".container").append(dom);
//--------- Begin ----------
$(".love").show().animate({bottom:"+=120px",opacity:"0"},1500);
//--------- End ------------
})
})
</script>
</body>
</html>