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效果参考手册