夜光带你走进Jquery（六）擅长的领域

最新推荐文章于 2019-12-03 19:43:35 发布

GeniusTeam-夜光

最新推荐文章于 2019-12-03 19:43:35 发布

阅读量140

点赞数

分类专栏： Genius-Jquery

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102676951

版权

Genius-Jquery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

用你的真诚去关心别人，不吝微笑，记住别人的名字，学会聆听，了解别人的兴趣，懂得尊重他人

正文：

jQuery 效果 - 淡入淡出

通过 jQuery

我们可以实现元素的淡入淡出效果。

一、首先注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。

二、其次 fadeTo() 没有默认参数，必须加上 slow/fast/Time

jQuery fadeIn() 方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);  // 通过这种方法使得加载三个，一个比一个慢
            });
        });
    </script>
</head>

<body>
<p>夜光：以下实例演示了 fadeIn() 使用了不同参数的效果</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

jQuery fadeOut() 方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
            });
        });
    </script>
</head>

<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

jQuery fadeToggle() 方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
            });
        });
    </script>
</head>
<body>

<p>夜光：实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

jQuery fadeTo() 方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").fadeTo("slow",0.15);
                $("#div2").fadeTo("slow",0.4);
                $("#div3").fadeTo("slow",0.7);
            });
        });
    </script>
</head>

<body>
<p>夜光：演示 fadeTo() 使用不同参数</p>
<button>点我让颜色变淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>