jQuery动画效果——淡入淡出

最新推荐文章于 2024-03-10 18:19:17 发布

原创最新推荐文章于 2024-03-10 18:19:17 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery动画 #淡入淡出

JavaScript基础专栏收录该内容

19 篇文章

订阅专栏

本文深入讲解jQuery中的动画效果，包括淡入淡出动画的实现原理和应用，如fadeIn(), fadeOut(), fadeToggle(), fadeTo()及delay()的使用技巧。

任务描述

本关任务：掌握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>