JQuery的特殊效果

fadeOut()淡入
fadeToggle（）切换淡入淡出
hide() 隐藏元素
show() 现实元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle()依次展开或者卷起某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js">
        $(function () {
            $('#btn').click(function () {
                $('.box').fadeIn(1000,'swing',function () {
                    //可以加一个回调函数
                    alert('done');
                });
            })
        })
    </script>
</head>
<body>
<input type="button" name="" value="动画" id="btn">
    <div class="box"></div>
</body>
</html>

点击按钮，元素淡出，完成之后弹出done，不知道为什么，没有运行出来，可能是浏览器的问题。

链式调用-层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            font-family: 'Microsoft Yahei';
        }
        body ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        .menu{
            width: 300px;
            height: 300px;
        }
        .menu .level1,.menu li ul a {
            display: block;
            width: 300px;
            height: 30px;
            line-height: 30;
            text-decoration: none;
            background-color: #3366cc;
            color: #fff;
            font-size: 16px;
            text-indent: 10px;
        }
        .menu .level1{
            border-bottom: 1px solid #afc6f6;
        }

        .menu li ul a {
            font-size: 14px;
            text-indent: 20px;
            background-color: #7aa1ef;
        }
        .menu li ul li{
            border-bottom: 1px solid #afc6f6;
        }

        .menu li ul {
            display: none;
        }
        .menu li ul li a:hover{
            background-color: #f6b544;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.level1').click(function () {
                $(this).next().stop().slideToggle().parent().sibling().children('ul').slideUp();
            })
        })
    </script>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">水果</a>
            <ul class="current">
                <li><a href="#">苹果</a></li>
                <li><a href="#">梨子</a></li>
                <li><a href="#">葡萄</a></li>
                <li><a href="#">火龙果</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">海鲜</a>
            <ul>
                <li><a href="#">鱼</a></li>
                <li><a href="#">扇贝</a></li>
                <li><a href="#">龙虾</a></li>
                <li><a href="#">象牙蚌</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">肉类</a>
            <ul>
                <li><a href="#">牛肉</a></li>
                <li><a href="#">猪肉</a></li>
                <li><a href="#">肌肉</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

链式调用：
level1的下一级淡入淡出，返回上一级的，孩子隐藏。

JQuery的特殊效果和链式调用

JQuery的特殊效果

链式调用-层级菜单

猜你喜欢