jQuery动画效果——淡入淡出

任务描述

本关任务：掌握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()的前两个参数是必需的；
第一个参数表示执行的速度；
第二个参数表示最终达到的透明度；
第三个参数（完成后的函数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>

jQuery动画效果——淡入淡出相关推荐

JQuery动画之淡入淡出动画
1. 淡入动画 1.1 不带参数的淡入动画格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...
写给大忙人看的jQuery动画效果
文章目录一.基本动画效果 1.隐藏匹配元素 2.显示匹配元素 3.自动切换显示或隐藏状态例子:实现自动隐藏菜单二.淡入.淡出动画效果例子:使用fadeTo实现图片颜色变淡三.滑动效果 1.滑 ...
jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
html淡化效果,jQuery实现基本淡入淡出效果的方法详解
本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元 ...
html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: ...
前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
文章目录 1 JQuery动画效果 1. 基本效果 2. 滑动效果 3 淡入淡出效果 4 自定义动画 5 动画控制 6 设置 7 事件 7-1 常用事件 7-2 事件绑定 7-3 移除事件 7-4 阻 ...
jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
使用C++实现多张BMP图片转换为YUV动画----附加淡入淡出转场（逐渐变明变暗），及垂直滑像转场（逐行渐变）
使用C++实现多张BMP图片转换为YUV动画----附加淡入淡出转场(逐渐变明变暗),及垂直滑像转场(逐行渐变) 一.BMP图像简介 1.BMP图像是什么? 2.BMP图像文件结构 1)图象文件头 2 ...
android gone动画_Android动画之淡入淡出
为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...
jQuery实现一个淡入淡出下拉菜单非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

jQuery动画效果——淡入淡出

jQuery动画效果——淡入淡出相关推荐

最新文章

热门文章