jQuery(5)——jQuery fade淡入淡出效果

最新推荐文章于 2023-06-16 15:08:59 发布

人生莫如饥荒

最新推荐文章于 2023-06-16 15:08:59 发布

阅读量470

点赞数

分类专栏： jQuery学习文章标签： jQuery 淡入淡出效果 fade

本文链接：https://blog.csdn.net/qq_32953185/article/details/82915422

版权

jQuery学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery fade淡入淡出效果

淡入淡出效果是基于透明度的变换而实现的。在测试demo的时候可以在控制台查看elements中的opacity的变换

在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()

语法

$(selector).fadeXXX(speed,callback);

他们都可以有两个可选参数：

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

demo:

//fadeOut、fadeIn
            $("#btn").click(
                function(){
                $("#show").fadeOut("slow",
                    function(){ //callback()
                        $("#show").fadeIn("slow");
                    }
                );
                }
            )

fadeToggle()

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

demo:

//fadeToggle
            $("#btn2").click(
                function(){ 
                    $("#show2").fadeToggle();
                }
            )

fadeTo()

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

fadeTo()除了拥有两个可选参数外，还有一个必选参数opacity.
语法：

$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

demo:

//fadeTo
            //$(selector).fadeTo(speed,opacity,callback)
            $("#btn3").click(
                function(){ 
                    $("#show3").fadeTo("slow",0.5);
                }
            )

测试demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery fade淡入淡出效果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function(){
            //fadeOut、fadeIn
            $("#btn").click(
                function(){
                $("#show").fadeOut("slow",
                    function(){ //callback()
                        $("#show").fadeIn("slow");
                    }
                );
                }
            )
            //fadeToggle
            $("#btn2").click(
                function(){ 
                    $("#show2").fadeToggle();
                }
            )
            //fadeTo
            //$(selector).fadeTo(speed,opacity,callback)
            $("#btn3").click(
                function(){ 
                    $("#show3").fadeTo("slow",0.5);
                }
            )

        })
    </script>
    <style>
            .box{
                width: 300px;
                margin:0 auto;
                border: 2px solid green;
            }
            #show,#show2,#show3{
                width:296px;
                height: 100px;
                margin:0 auto;
                border: 2px solid red;
                background-color: rgb(250, 205, 80);
            }
        </style>
</head>
<body>
    <div class="box">
        <input type="button" id="btn" value="淡出+淡入">
        <div id="show">
        </div>
    </div>
    <div class="box">
        <input type="button" id="btn2" value="toggle 自行判断使用">
        <div id="show2">
        </div>
    </div>
    <div class="box">
            <input type="button" id="btn3" value="fadeTo可自定义要达到的透明度">
            <div id="show3">
            </div>
        </div>
</body>
</html>

demo预览

width="100%" height="300" scrolling="no" title="jQuery淡入淡出" src="//codepen.io/liantao/embed/ePNdOd/?height=300&theme-id=34712&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen jQuery淡入淡出 by 练涛 ( @liantao) on CodePen.

See the Pen jQuery淡入淡出 by 练涛 (@liantao) on CodePen.

扩展——slide滑动效果

滑动效果是滑动的显示、隐藏元素

滑动效果有3个方法：
slideUp，slideDown，slideToggle
底层实现是修改height，如图：
slide

人生莫如饥荒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery(5)——jQuery fade淡入淡出效果

jQuery fade淡入淡出效果淡入淡出效果是基于透明度的变换而实现的。在测试demo的时候可以在控制台查看elements中的opacity的变换在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()语法$(selector).fadeXXX(speed,callback);...
复制链接

扫一扫