Js运动动画系列8--链式动画

来源：互联网发布：linux which命令编辑：程序博客网时间：2024/04/30 07:21

<head>    <title>5-1链式动画</title>    <!--引用js文件，把运动代码封装起来 -->    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        ul li        {            list-style: none;        }        li        {            width: 200px;            height: 100px;            background: yellow;            border: 4px solid #000;            fliter: alpha(opacity:30);            opacity: 0.3;        }    </style>    <script type="text/javascript" src="Scripts/move.js"></script></head><body>    <ul>        <li id="li1"></li>    </ul></body></html>

<script type="text/javascript">        //链式动画:执行完当前动画，调用回调函数执行下一个动画        window.onload = function () {            var li1 = document.getElementById('li1');            li1.onmouseover = function () {                statMove(li1, 'width', 400, function () {                    statMove(li1, 'height', 200, function () {                        statMove(li1, 'opacity', 100);                    });                });            }            li1.onmouseout = function () {                statMove(li1, 'opacity', 30, function () {                    statMove(li1, 'height', 100, function () {                        statMove(li1, 'width', 200);                    });                });            }        }    </script>

0 0