上一节:
下一节:

  jQuery 淡入淡出

  • jQuery效果 - 淡入淡出

    使用jQuery，您可以淡化元素的可见性。
    点击淡入/淡出面板
    jQuery有以下淡入淡出方法：
    • fadeIn()
    • fadeOut()
    • fadeToggle()
    • fadeTo()

  • jQuery fadeIn()方法

    jQuery fadeIn()方法用于淡入隐藏元素。
    语法：$(selector).fadeIn(speed,callback);
    可选的speed参数指定效果的持续时间。 它可以采用以下值："slow", "fast"或者毫秒。
    可选的回调参数是在淡入完成后要执行的函数。
    以下示例演示了具有不同参数的fadeIn()方法： 
       
           <head>
              <script type="text/javascript" src="jquery.js"></script>
              <script type="text/javascript">
              $("button").click(function(){
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
              });
             </script>
           </head>
    尝试一下

  • jQuery fadeOut()方法

    jQuery fadeOut()方法用于淡出可见元素。
    语法：$(selector).fadeOut(speed,callback);
    可选的speed参数指定效果的持续时间。 它可以采用以下值："slow", "fast"或者毫秒。
    可选的回调参数是在淡出完成后要执行的函数。
    以下示例演示了具有不同参数的fadeOut()方法： 
       
           <head>
              <script type="text/javascript" src="jquery.js"></script>
              <script type="text/javascript">
              $("button").click(function(){
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
              });
             </script>
           </head>
    尝试一下

  • jQuery fadeToggle()方法

    jQuery fadeToggle()方法在fadeIn()和fadeOut()方法之间切换。
    如果元素淡出，fadeToggle()将淡入它们。
    如果元素淡入，fadeToggle()将淡出它们。
    语法：$(selector).fadeToggle(speed,callback);
    可选的speed参数指定效果的持续时间。 它可以采用以下值："slow", "fast"或者毫秒。
    可选的回调参数是在淡入淡出完成后要执行的函数。
    以下示例演示了具有不同参数的fadeToggle()方法： 
       
           <head>
              <script type="text/javascript" src="jquery.js"></script>
              <script type="text/javascript">
              $("button").click(function(){
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
              });
             </script>
           </head>
    尝试一下

  • jQuery fadeTo()方法

    jQuery fadeTo()方法在方法允许淡入到给定的不透明度（0到1之间的值）。
    语法：$(selector).fadeTo(speed,opacity,callback);
    可选的speed参数指定效果的持续时间。 它可以采用以下值："slow", "fast"或者毫秒。
    fadeTo()方法中所需的opacity参数指定渐变到给定的不透明度（介于0和1之间的值）。
    可选的回调参数是在淡入完成后要执行的函数。
    以下示例演示了具有不同参数的fadeTo()方法： 
       
           <head>
              <script type="text/javascript" src="jquery.js"></script>
              <script type="text/javascript">
              $("button").click(function(){
                $("#div1").fadeTo("slow", 0.15);
                $("#div2").fadeTo("slow", 0.4);
                $("#div3").fadeTo("slow", 0.7);
              });
             </script>
           </head>
    尝试一下
    有关所有jQuery效果的完整概述，请转到我们的jQuery效果参考手册。
上一节:
下一节: