我的第六课：jQuery 效果 - 淡入淡出

来源：互联网发布：java 线程 wait 编辑：程序博客网时间：2024/05/21 19:49

jQuery 效果 - 淡入淡出的代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
     <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
   <script type="text/javascript">
      $(document).ready(
          function()
          {
             $("#button1").click(
                function()
                {
                   $("#div11").fadeIn();
                   $("#div12").fadeIn("slow");
                   $("#div13").fadeIn(3000);
                }
             );
          }
      );

        $(document).ready(
           function()
           {
               $("#button2").click(
                  function()
                  {
                     $("#div21").fadeToggle();
                     $("#div22").fadeToggle("slow");
                     $("#div23").fadeToggle(3000);
                  }
               );
           }
      );

       $(document).ready(
           function()
           {
               $("#button3").click(
                  function()
                  {
                     $("#div31").fadeToggle();
                     $("#div32").fadeToggle("slow");
                     $("#div33").fadeToggle(3000);
                  }
               );
           }
      );

   </script>
</head>

<body>
       <button id="button1" type="button" >点击一下，图片出来</button>
       <button id="button2" type="button" >点击一下，图片进去</button>
       <button id="button3" type="button" >点击一下，图片出来进去</button>
       <p>
       <div id="div11" style="width: 80px;height: 80px;display: none;background: red;"></div>
       <div id="div12" style="width: 80px;height: 80px;display: none;background: green;"></div>
       <div id="div13" style="width: 80px;height: 80px;display: none;background: blue;"></div>
       <p>

       <div id="div21" style="width: 80px;height: 80px;background: red;"></div>
       <div id="div22" style="width: 80px;height: 80px;background: green;"></div>
       <div id="div23" style="width: 80px;height: 80px;background: blue;"></div>
        <p>

       <div id="div31" style="width: 80px;height: 80px;background: red;"></div>
       <div id="div32" style="width: 80px;height: 80px;background: green;"></div>
       <div id="div33" style="width: 80px;height: 80px;background: blue;"></div>

</body>
</html>

0 0