首页 > 代码库 > 4基本动画

4基本动画

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style type="text/css">        div {            border: 1px solid #000;            padding: 5px;            margin: 2px;            width: 100px;            position: absolute;            display: none;            background-color: white;        }        body {            border: 2px dashed;        }        img {            position: absolute;        }    </style>    <title></title>    <script src="http://www.mamicode.com/Scripts/jquery-1.8.2.min.js"></script>    <script type="text/javascript">        $(function () {            $("#btnHid").click(function () {               // $("ul").hide(1000);//设置动画的执行时间 内置fast=200  normal=400 slow=600                //2.设置回调函数                //$("ul").hide(1000, function () {                //    $(this).show(3000);                //});                                //3递归                showHide();            });        });        var times = 0;        //用递归实现掩藏 显示        function showHide()        {            if (times < 3)            {                $("ul").toggle(3000, showHide);                times++;            }                   }    </script></head><body>    <input type="button" value="http://www.mamicode.com/测试" id="btnHid" />    <ul>        <li content="广州小蛮腰1">广州小蛮腰1</li>        <li content="广州小蛮腰2">广州小蛮腰2</li>        <li content="广州小蛮腰3">广州小蛮腰3</li>        <li content="广州小蛮腰4">广州小蛮腰4</li>        <li content="广州小蛮腰5">广州小蛮腰5</li>    </ul></body></html>