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="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="测试" 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>

　　

posted @ 2014-06-14 00:00  编程猴子  阅读(151)  评论(0)    收藏  举报