一、jQuery ——淡入淡出

来源：互联网发布：rewear it aac 编辑：程序博客网时间：2024/06/05 11:42

jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
1、fadeIn() 用于淡入已隐藏的元素
2、fadeOut() 用于淡出可见元素

3、fadeToggle()

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

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

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

4、fadeTo() 方法允许渐变为给定的不透明度

一、

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>淡入fadeIn动画</title>    <style>        div{            top: 20px;            width: 100px;            height: 100px;            display: none;        }        .box1{            background-color: red;        }        .box2{            background-color: orange;        }        .box3{            background-color: #2b542c;        }    </style></head><body><button type="button">淡入</button><div class="box1"></div><div class="box2"></div><div class="box3"></div><!--可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。--><script src="jquery-1.11.3.min.js"></script><script>    $(document).ready(function () {        $("button").click(function () {            $(".box1").fadeIn();            $(".box2").fadeIn("slow");            $(".box3").fadeIn(1000);        });    });</script></body></html>

二、

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>淡出动画fadeOut</title>    <style>        div{            margin-top: 20px;            width: 100px;            height: 100px;        }        .box1{            background-color: red;        }        .box2{            background-color: orange;        }        .box3{            background-color: #2b542c;        }    </style></head><body>        <button type="button">淡出</button>        <div class="box1"></div>        <div class="box2"></div>        <div class="box3"></div>        <!--        可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。            可选的 callback 参数是 fading 完成后所执行的函数名称。        -->        <script src="jquery-1.11.3.min.js"></script>        <script>            $(document).ready(function () {                $("button").click(function () {                    $(".box1").fadeOut();                    $(".box2").fadeOut("slow");                    $(".box3").fadeOut(2000);                });            });        </script></body></html>

三、

jQuery fadeToggle() 方法

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

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

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

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>淡入淡出fadeToggle</title>    <style>        div{            margin-top: 20px;            width: 100px;            height: 100px;        }        .box1{            background-color: red;        }        .box2{            background-color: orange;        }        .box3{            background-color: #2b542c;        }    </style></head><body><button type="button">切换</button><div class="box1"></div><div class="box2"></div><div class="box3"></div><script src="jquery-1.11.3.min.js"></script><script>    $(document).ready(function () {        $("button").click(function () {            $(".box1").fadeToggle();            $(".box2").fadeToggle("slow");            $(".box3").fadeToggle(2000);        });    });</script></body></html>

四、

jQuery fadeTo() 方法

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

语法：

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

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

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

可选的 callback 参数是该函数完成后所执行的函数名称。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>透明度</title>    <style>        div{            margin-top: 20px;            width: 100px;            height: 100px;        }        .box1{            background-color: red;        }        .box2{            background-color: orange;        }        .box3{            background-color: #2b542c;        }    </style></head><body><button type="button">透明度</button><div class="box1"></div><div class="box2"></div><div class="box3"></div><script src="jquery-1.11.3.min.js"></script><script>        $(document).ready(function () {            $("button").click(function () {                $(".box1").fadeTo(500,0.5);                $(".box2").fadeTo("slow",0.8);                $(".box3").fadeTo(2000,0.2);        });        });</script></body></html>

阅读全文

0 0