03 jQuery动画

基本动画 show hide toggle

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基本动画</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style>
        .box{
            height: 200px;
            width: 200px;
            margin: 10px;
            background: #ff6700;
            display: none;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>开关式动画</button>
    <div class="box"></div>
    <script type="text/javascript">
        $(function () {
            // 显示
            $("button").eq(0).click(function () {
                // show(动画时间,fn)
                // normal 400ms   slow 600ms  fast 200ms  也可以是时间 单位毫秒
                // fn 回调函数  动画结束后执行回调函数
                $(".box").show('slow',function () {
                    // text() 在当前标签写入文本
                    $(this).text("加载完成！")
                })
            });
            // 隐藏
            $("button").eq(1).click(function () {
                // hide(动画时间,fn)
                // normal 400ms   slow 600ms  fast 200ms
                // fn 回调函数
                $(".box").hide('fast',function () {
                    console.log('over!');
                })
            });
            // 开关式动画 自动检测动画的开关动态 从而作出关开动作
            $('button').eq(2).click(function () {
                // 如果在开始新的动画之前不将之前的动画效果清除，会导致动画排队。所以在动画之前需要stop
                $('.box').stop().toggle(2000);
            })
        })
    </script>
</body>
</html>

 

卷帘门动画 slideDown slideUp slideToggle

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卷帘门动画</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style>
        .box{
            height: 200px;
            width: 200px;
            margin: 10px;
            background: #ff6700;
            display: none;
        }
    </style>
</head>
<body>
    <button id="slideDown">卷帘门下拉</button>
    <button id="slideUp">卷帘门上拉</button>
    <button id="slideToggle">开关式卷帘门</button>
    <div class="box"></div>
    <script type="text/javascript">
        $(function () {
            // 卷帘门下拉
            $("#slideDown").click(function () {
                $('.box').slideDown()
            });
            // 卷帘门上拉
            $("#slideUp").click(function () {
                $('.box').slideUp()
            });
            // 开关式卷帘门 自动检测动画的开关动态 从而作出关开动作
            $('#slideToggle').click(function () {
                $('.box').stop().slideToggle()
            })
        })
    </script>
</body>
</html>

 

淡入淡出 fadeIn fadeOut fadeToggle

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style>
        .box{
            height: 200px;
            width: 200px;
            margin: 10px;
            background: #ff6700;
            display: none;
        }
    </style>
</head>
<body>
    <button id="fadeIn">淡入</button>
    <button id="fadeOut">淡出</button>
    <button id="fadeToggle">开关式淡入淡出</button>
    <div class="box"></div>
    <script type="text/javascript">
        $(function () {
            // 淡入
            $("#fadeIn").click(function () {
                $('.box').fadeIn(1000)
            });
            // 淡出
            $("#fadeOut").click(function () {
                $('.box').fadeOut(1000)
            });
            // 开关式淡入淡出 自动检测动画的开关动态 从而作出关开动作
            $('#fadeToggle').click(function () {
                $('.box').stop().fadeToggle(1000)
            })
        })
    </script>
</body>
</html>

 

自定义动画 animate

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <button>动画吧</button>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //jquery入口函数
        $(function () {
            // animate({队列的属性},time,fn)
            var attr={
                "height":200,
                'width':200,
                'top':200,
                'left':500,
                'border-radius':200
            };
            var attr2={
                "height":0,
                'width':0,
                'top':0,
                'left':1000
            };
            $('button').click(function () {
                $('div').stop().animate(attr,2000,function () {
                    $('div').stop().animate(attr2,1000)
                });
            });
        })
    </script>
</body>
</html>

 

二级菜单实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: #ff6700;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">三级菜单2</a></li>
                <li><a href="javascript:void(0);">三级菜单3</a></li>
                <li><a href="javascript:void(0);">三级菜单4</a></li>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $(function () {
        $('.wrap>ul>li').mouseenter(function () {
            $('.wrap>ul>li').eq($(this).index()).children('ul').stop().slideDown('slow');
        });
        $('.wrap>ul>li').mouseleave(function () {
            $('.wrap>ul>li').eq($(this).index()).children('ul').stop().slideUp('slow');
        })
    })
</script>
</body>
</html>

 

posted @ 2019-07-02 11:33  毛斯钢  阅读(129)  评论(0)  编辑  收藏  举报