我的第八课：jQuery 效果

本文链接：https://blog.csdn.net/meiyouyimingtian/article/details/20413231

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()
              {
                $(".button1").animate({left:'500px'});
              }
           );
        }
     );
     $(document).ready(
        function(){
           $("#button2").click(
              function()
              {
                $(".button2").animate({
          left:'250px',
          opacity:'0.5',
          height:'150px',
          width:'150px'
        });
              }
           );
        }
     );

      $(document).ready(
        function(){
           $("#button3").click(
              function()
              {
                $(".button3").animate({
          left:'250px',
          height:'+=150px',
          width:'+=150px'
        });
              }
           );
        }
     );
       $(document).ready(
        function(){
           $("#button4").click(
              function()
              {
                $(".button4").animate({
          height:'toggle'
        });
              }
           );
        }
     );
     $(document).ready(
        function(){
           $("#button5").click(
              function()
              {
               var div= $(".button5");
                   div.animate({height:'300px',opcity:'0.4'},"slow");
                   div.animate({width:'300px',opcity:'0.8'},"slow");
                   div.animate({height:'100px',opcity:'0.4'},"slow");
                   div.animate({width:'100px',opcity:'0.8'},"slow");
              }
           );
        }
     );
        $(document).ready(
        function(){
           $("#button6").click(
              function()
              {
                 var div= $(".button6");
                    div.animate({ left:'250px'},"slow");
                    div.animate({ fontSize:'3em'},"slow");
              }
           );
        }
     );
   </script>
</head>

<body>
        <button id="button1" >开始动画=移动</button> <button id="button2" >开始动画=多个属性变大</button> <button id="button3" >开始动画=多个属性变大</button>
        <button id="button4" >开始动画=伸缩</button>   <button id="button5" >开始动画=扩散</button> <button id="button6" >开始动画=移动且字体变大</button>
     <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
  <div class="button1" style="background: #98bf21;height:100px;width: 100px;position: absolute;" >
     </div>
     <p><p><p><p><p><hr>
     <div class="button2" style="background:red;height:100px;width:100px;position:absolute;">
        </div>
         <p><p><p><p><p><hr>
     <div class="button3" style="background:blue;height:100px;width:100px;position:absolute;">
        </div>
         <p><p><p><p><p><hr>
     <div class="button4" style="background:gray;height:100px;width:100px;position:absolute;">
        </div>
         <p><p><p><p><p><hr>
     <div class="button5" style="background:green;height:100px;width:100px;position:absolute;">
        </div>
         <p><p><p><p><p><hr>
     <div class="button6" style="background:navy;height:100px;width:100px;position:absolute;">hello
        </div>
   </body>
</html>