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



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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值