jquery的淡入淡出 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.4.2.js"></script>
        <script src="../js/jquery-1.8.3.min.js"></script>
        <!--fadeToggle载这个1.8里-->
        <script>
            //jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
            /*
             * jQuery Fading 方法
             * 通过 jQuery，您可以实现元素的淡入淡出效果。
             * jQuery 拥有下面四种 fade 方法：
             * fadeIn()
             * fadeOut()
             * fadeToggle()
             * fadeTo()
             */
            
            //jQuery fadeIn() 用于淡入已隐藏的元素
            $(document).ready(function(){
                //jQuery fadeIn() 用于淡入已隐藏的元素
                $("button#fadeIn").click(function(){
                    $("#div1").fadeIn();
                    $("#div2").fadeIn("slow");
                    $("#div3").fadeIn(3000);
                });
              //jQuery fadeOut() 方法用于淡出可见元素。
              $("button#fadeOut").click(function(){
                  $("#div1").fadeOut();
                  $("#div2").fadeOut("slow");
                  $("#div3").fadeOut(3000);
              });
              
              /*
               * jQuery fadeToggle() 方法
               * jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
               * 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
               * 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果
               * 
               * 
               * 语法：$(selector).fadeToggle(speed,callback);
               * 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
               * 可选的 callback 参数是 fading 完成后所执行的函数名称。
               * 下面的例子演示了带有不同参数的 fadeToggle() 方法：
               * 
               */
              $("button#fadeToggle").click(function(){
                  $("#div1").fadeToggle();
                  $("#div2").fadeToggle("slow");
                  $("#div3").fadeToggle(3000);              
              });
              
              /*
               * jQuery fadeTo() 方法
               * jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
               * 语法：$(selector).fadeTo(speed,opacity,callback);
               * 
               * 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
               * fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
               * 可选的 callback 参数是该函数完成后所执行的函数名称。
               * 下面的例子演示了带有不同参数的 fadeTo() 方法
               */
              $("button#fadeTo").click(function(){
                  $("#div1").fadeTo("slow",0.15);
                  $("#div2").fadeTo("slow",0.4);
                  $("#div3").fadeTo("slow",0.7);
              });
              
            });
        </script>
    </head>
    <body>
        <p>演示带有不同参数的 fadeIn() 方法和带有不同参数的fadeOut()方法。</p>
        <button id="fadeIn">点击这里，使三个矩形淡入</button><br />
        <button id="fadeOut">点击这里，使三个矩形淡出</button><br />
        <button id="fadeToggle">点击这里，使三个矩形淡入淡出切换</button><br />
        <button id="fadeTo">点击这里,演示带有不同参数的 fadeTo()方法。</button><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>

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.4.2.js"></script>
        <script src="../js/jquery-1.8.3.min.js"></script>
        <script>
            $(document).ready(function(){
              $("button").click(function(){
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
              });
        });
        </script>
    </head>
    <body>
        <p>演示带有不同参数的 fadeToggle() 方法。</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>

 

posted @ 2019-07-15 23:58  薄眠抛却陈年事。  阅读(533)  评论(0)  编辑  收藏  举报