Jq自定义动画

最新推荐文章于 2022-09-21 19:10:20 发布

转载最新推荐文章于 2022-09-21 19:10:20 发布 · 71 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sumg/p/3742691.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*****
        animate(params,speed,callback);
        (1),params:一个包含样式属性及值的映射比如{propertyp1:"value1",propertyp1:"value2"}
        (2).speed,速度参数，可选
        (3),callback,在动画完成时执行的函数，可选
        *****/
        /*1、
        $(function() {
        $("#panel").click(function() {
        $(this).animate({left:"500px"},3000);
        });
        });
        */
        // 2、 累加 ，累减

        /*
        $(function() {
        $("#panel").click(function() {
        $(this).animate({ left: "+=500px" }, 3000);//在当前位置累加到500px
        });
        });
        */

        // 3、多重动画
        /*
        $(function() {
        $("#panel").click(function() {
        $(this).animate({ left: "+=500px",height:"200px"}, 3000); //向右滑动时放大元素的高度
        }); //或： $(this).animate({ left: "+=500px"}, 3000);
        $(this).animate({ height:"200px"}, 3000);


        }); 
        */



        /*

        //4、综合动画
        $(function() {
        $("#panel").css("opacity", "0.5"); //设置不透明度 
        $("#panel").click(function() {

        $(this).animate({ left: "+=500px", height: "200px", opacity: "1" }, 3000).animate({top:"200px",width:"200px"},300).fadeOut ("slow");
        });
        }); 
        */

        //5、动画回调函数 ,想要在最后改变样式把fadeout（），改为css（）；并不能得到预期的效果而应该把css放到回调函数中

        $(function () {
            $("#panel").css("opacity", "0.5"); //设置不透明度 
            $("#panel").click(function () {

                $(this).animate({ left: "+=500px", height: "200px", opacity: "1" }, 3000).animate({ top: "200px", width: "200px" }, 300, function () {

                    $(this).css("border", "5px solid blue");
                })
            });
        }); 




    </script>
    <style type="text/css">
        #panel
        {
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #0050D0;
            background: #96E555;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="panel">
    </div>
</body>
</html>