zoukankan      html  css  js  c++  java
  • jQuery淡入淡出

    jQuery Fading 方法

    通过 jQuery,您可以实现元素的淡入淡出效果。

    jQuery 拥有下面四种 fade 方法:

    • fadeIn()
    • fadeOut()
    • fadeToggle()
    • fadeTo()
      <!DOCTYPE html>
      <html>
      <head>
      <script src="/jquery/jquery-1.11.1.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>点击这里,使三个矩形淡入</button>
      <br><br>
      <div id="div1" style="80px;height:80px;display:none;background-color:red;"></div>
      <br>
      <div id="div2" style="80px;height:80px;display:none;background-color:green;"></div>
      <br>
      <div id="div3" style="80px;height:80px;display:none;background-color:blue;"></div>
      </body>
      </html>

      <!DOCTYPE html>
      <html>
      <head>
      <script src="/jquery/jquery-1.11.1.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
        $("button").click(function(){
          $("#div1").fadeOut();
          $("#div2").fadeOut("slow");
          $("#div3").fadeOut(3000);
        });
      });
      </script>
      </head>
      
      <body>
      <p>演示带有不同参数的 fadeOut() 方法。</p>
      <button>点击这里,使三个矩形淡出</button>
      <br><br>
      <div id="div1" style="80px;height:80px;background-color:red;"></div>
      <br>
      <div id="div2" style="80px;height:80px;background-color:green;"></div>
      <br>
      <div id="div3" style="80px;height:80px;background-color:blue;"></div>
      </body>
      
      </html>

      <!DOCTYPE html>
      <html>
      <head>
      <script src="/jquery/jquery-1.11.1.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="80px;height:80px;background-color:red;"></div>
      <br>
      <div id="div2" style="80px;height:80px;background-color:green;"></div>
      <br>
      <div id="div3" style="80px;height:80px;background-color:blue;"></div>
      </body>
      
      </body>
      </html>

      <!DOCTYPE html>
      <html>
      <head>
      <script src="/jquery/jquery-1.11.1.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="80px;height:80px;background-color:red;"></div>
      <br>
      <div id="div2" style="80px;height:80px;background-color:green;"></div>
      <br>
      <div id="div3" style="80px;height:80px;background-color:blue;"></div>
      
      </body>
      </html>

  • 相关阅读:
    Visual C#核心编程之泛型
    Visual C#核心编程之枚举器
    标准的非托管资源的销毁模式
    Visual C#核心编程之LINQ
    Visual C#核心编程之数组和集合
    ACCPSQL第四章上机六
    Visual C#2008核心编程之类型
    一月一代码 3月 kmp 领悟代码
    [转] 技巧 如何统一设置 windows live writer 的 图片大小
    understanding the linux virtual memory management 图序
  • 原文地址:https://www.cnblogs.com/Yimi/p/6890568.html
Copyright © 2011-2022 走看看