JQuery animate 动画研究汇总

jquery.color.js要放在juqery-1.8.3.js这个核心库的下面：

.aspx代码如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/SAMPLE_CODE/AMST_SAMPLE.master" AutoEventWireup="true" CodeFile="S1_JqueryAnimate_simple.aspx.cs" Inherits="SAMPLE_CODE_S1_JqueryAnimate_simple" %>


 <asp:Content ID="Content1" ContentPlaceHolderID="CPH_HEAD" Runat="Server">
     <link href="../CSS/animate_simple.css" rel="stylesheet" type="text/css" />
     <script src="../Jscript/jquery-1.8.3.js" type="text/javascript"></script>
     <script src="../Jscript/jquery.color.js" type="text/javascript"></script>


     <script type ="text/javascript">
         $(document).ready(function () {




             //1. div_animatoe_001,点击层本身,改变层的宽度到400px;
             $("#div_animate_001").click(function () {
                 $(this).animate({ "width": "400px" });
             });


             //2. 点击层本身,每次增加宽度20px;
             $("#div_animate_002").click(function () {
                 $(this).animate({ width: "+=20" });
             });




             //3.   点击层本身,同时改变高度和宽度及字体大小，一起设置
             $("#div_animate_003").click(function () {
                 $(this).animate({ width: "400px", height: "40px", fontSize: "20px" });
             });




             //4. 点击层本身,同时改变高度和宽度及字体大小,分开设置
             $("#div_animate_004").click(function () {
                 $(this).animate({ width: "400px" }, 200);
                 $(this).animate({ height: "40px" }, 200);
                 $(this).animate({ fontSize: "20px" }, 200);
             });


             //5. 点击层本身,更改背景色及透明度
             $("#div_animate_005").click(function () {
                 $(this).animate({ backgroundColor: "green", width: "300px" }, 300);
                 $(this).animate({ opacity: "0.5", color: "yellow" });


             });


             //6. 可移动的层,每次点击向右移动30px
             $("#btn_6").click(function () {
                 $("#div_animate_006").animate({ left: "0px" });
             });


             $("#div_animate_006").click(function () {
                 $(this).animate({ left: "+=30px" });
             });


             //7.内层的移动控制
             $("#div_left").click(function () {
                 var r = getR();
                 if (r >= 80) {
                     $("#div_content").animate({ left: "-=80" });
                 } else {
                     $("#div_content").animate({ right: "0" });
                 }

             });


             $("#div_right").click(function () {
                 var l = getL();
                 if (l >= 80) {
                     $("#div_content").animate({ left: "+=80" });
                 } else {
                     $("#div_content").animate({ left: "0" });
                 }
             });


             
         });


 //2个取值函数可以合并,请自行合并


         function getR() {
             var _w1 = document.getElementById("div_content").offsetWidth;
             var _L1 = document.getElementById("div_content").offsetLeft;
             var _w2 = document.getElementById("div_middle").offsetWidth;
             var _L2 = document.getElementById("div_middle").offsetLeft;
             return (_w1 - _w2 - _L2 + _L1);
         }

         function getL() {
             var _w1 = document.getElementById("div_content").offsetWidth;
             var _L1 = document.getElementById("div_content").offsetLeft;
             var _w2 = document.getElementById("div_middle").offsetWidth;
             var _L2 = document.getElementById("div_middle").offsetLeft;
             return ( _L2 - _L1);
         }


     </script>
     
     
 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="CPH_MEMO" Runat="Server">
 <h3>简单动画展示</h3>
 </asp:Content>


 <asp:Content ID="Content3" ContentPlaceHolderID="CPH_MAIN" Runat="Server">
     <div id="div_animate_001" class ="divAm">
         点击层本身,改变层的宽度到400px;
     </div>


     <div id="div_animate_002" class ="divAm">
         点击层本身,每次增加宽度20px;
     </div>


     <div id="div_animate_003" class ="divAm">
         点击层本身,同时改变高度和宽度及字体大小
     </div>


     <div id="div_animate_004" class ="divAm">
         点击层本身,同时改变高度和宽度及字体大小
     </div>


     <div id="div_animate_005" class ="divAm">
         点击层本身,更改背景色及透明度
     </div>

     <div id="div_animate_006" class ="divAm">
         可移动的层,每次点击向右移动30px
     </div>
     <input id="btn_6" type="button" value="复位层6" />


     <hr />
     内层的移动控制
     <div id="div_animate_007_outer">
     
         <div id="div_left"><</div>
         <div id="div_right">></div>

         <%--middle是内容层的外框--%>
         <div id="div_middle">
             <%--content为实际内容层,实际内容可能大于外框--%>
             <div id="div_content">
                 <img src="../imgs/img1.jpg" alt="" />
             </div>

         </div>

         <div style ="clear:both;"></div>

     </div>

 </asp:Content>

 界面如下：