本关任务:掌握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()
,它的实现原理是:透明度的切换,透明的变为不透明,不透明的变为透明;
下面是它们的显示效果:
上面的方法都是控制透明度在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()
的前两个参数是必需的;- 第一个参数表示执行的速度;
- 第二个参数表示最终达到的透明度;
- 第三个参数(完成后的函数
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>