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">&lt;</div>
        <div id="div_right">&gt;</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>

 界面如下：