五、jQuery动效

显示隐藏动画

显示show()动画，隐藏动画hide()，切换动画toggle()

这三个方法都可以传入参数：

一个参数

代表动画完成的时间
两个参数

第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数

$(function () {
    $('button').eq(0).click(function () {
        $('div').show(1000, function () {
            alert('显示动画执行完毕')
        })
    })
    $('button').eq(1).click(function () {
        $('div').hide(1000, function () {
            alert('隐藏动画执行完毕')
        })
    })
    $('button').eq(2).click(function () {
        $('div').toggle(1000, function () {
            alert('切换动画执行完毕')
        })
    })

})

对联广告案例

监听网页滚动

当滚动到一定量时，展示图片否则隐藏图片

$(function () {
    // 1. 监听网页的滚动
    $(window).scroll(function () {
        // 1.1 获取网页滚动的偏移位
        var offset = $('html,body').scrollTop()
        // 1.2 判断网页是否滚动到了指定的位置
        if (offset >= 500) {
            // 1.3 显示广告
            $('img').show(1000)
        } else {
            $('img').hide(1000)
        }
    })
})

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .left {
                float: left;
                position: fixed;
                left: 0;
                top: 200px;
            }

            .right {
                float: right;
                position: fixed;
                right: 0;
                top: 200px;
            }

            img {
                display: none;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                // 1. 监听网页的滚动
                $(window).scroll(function () {
                    // 1.1 获取网页滚动的偏移位
                    var offset = $('html,body').scrollTop()
                    // 1.2 判断网页是否滚动到了指定的位置
                    if (offset >= 500) {
                        // 1.3 显示广告
                        $('img').show(1000)
                    } else {
                        $('img').hide(1000)
                    }
                })
            })
        </script>
    </head>

    <body>
        <img src="https://ae03.alicdn.com/kf/Ub8d7c62873d74ebda173addf2b82d741T.jpg" class="left">
        <img src="https://ae03.alicdn.com/kf/Ub8d7c62873d74ebda173addf2b82d741T.jpg"
             class="right"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>

</html>

展开收起动画

显示slideDown()动画，隐藏动画slideUp()，切换动画slideToggle()

这三个方法都可以传入参数：

一个参数

代表动画完成的时间
两个参数

第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数

$('button').eq(0).click(function () {
    $('div').slideDown(1000, function () {
        alert('展开完毕')
    })
})
$('button').eq(1).click(function () {
    $('div').slideUp(1000, function () {
        alert('收起完毕')
    })
})
$('button').eq(1).click(function () {
    $('div').slideToggle(1000, function () {
        alert('切换完毕')
    })
})

折叠菜单案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            list-style: none;
            width: 300px;
            margin: 100px auto;
        }

        .nav>li {
            border: 1px solid #000;
            line-height: 35px;
            border-bottom: none;
            text-indent: 2em;
            position: relative;
        }

        .nav>li:last-child {
            border-bottom: 1px solid #000;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .nav>li:first-child {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .nav>li>span {
            background: url("https://ae02.alicdn.com/kf/U7eebc02d0d5e4be287d88baf368f0019S.jpg") no-repeat center;
            display: inline-block;
            width: 32px;
            height: 32px;
            position: absolute;
            right: 10px;
            top: 5px;
        }

        .sub {
            display: none;
        }

        .sub>li {
            list-style: none;
            background-color: mediumorchid;
            border: 1px solid white;
        }

        .sub>li:hover {
            background-color: red;
        }

        .nav>.current>span {
            transform: rotate(90deg)
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function () {
            // 1. 监听一级菜单的点击事件
            $('.nav>li').click(function () {
                // 1.1 拿到二级菜单
                var $sub = $(this).children('.sub')
                // 1.2 让二级菜单显示
                $sub.slideDown(1000)
                // 1.3 拿到所有非当前二级菜单
                var otherSub = $(this).siblings().children('.sub')
                console.log(otherSub)
                // 1.4 让所有非当前二级菜单收起
                otherSub.slideUp(1000)
                // 1.5让被点击的一级菜单箭头旋转
                $(this).addClass('current')
                // 1.6 让所有非一级菜单箭头还原
                $(this).siblings().removeClass('current')
            })
        })

    </script>
</head>

<body>
    <ul class="nav">
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>

</html>

下拉菜单案例

在jQuery中，如果需要执行动画，建议在执行动画之前先调用stop方法，然后在执行动画。

当使用stop时：

不适用stop时：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            list-style: none;
            width: 300px;
            height: 50px;
            background: red;
            margin: 100px auto;
        }

        .nav>li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
        }

        .sub {
            list-style: none;
            background-color: royalblue;
            display: none
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function () {
            // 1. 监听一级菜单的移入事件
            $('.nav>li').mouseenter(function () {
                // 1.1 拿到二级菜单
                var $sub = $(this).children('.sub')
                // 1.2 停止当前正在运动的动画
                $sub.stop()
                // 1.3 让二级菜单展开
                $sub.slideDown(1000)
            })
            // 2. 监听一级菜单的移出事件
            $('.nav>li').mouseleave(function () {
                // 1.1 拿到二级菜单
                var $sub = $(this).children('.sub')
                // 1.2 停止当前正在运动的动画
                $sub.stop()
                // 1.3 让二级菜单收起
                $sub.slideUp(1000)
            })
        })

    </script>
</head>

<body>
    <ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单</li>
        <li>一级菜单</li>
    </ul>
</body>

</html>

淡入淡出动画

fadeIn淡入
fadeOut淡出
fadeToggle切换

以上三个方法均可传入两个参数：

时间
回调函数

与上述几种方法相似

fadeTo淡入到···

三个参数分别为：时间，淡入到（程度），回调函数

$('buton').eq(3).click(function () {
    $('div').fadeTo(1000, 0.5, function () {
        alert('淡入到完毕')
    })
})

弹窗广告案例

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .ad {
                position: fixed;
                right: 0;
                bottom: 0;
                display: none;
            }

            .ad>span {
                display: inline-block;
                width: 30px;
                height: 30px;
                position: absolute;
                top: 0;
                right: 0;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
        <script>
            $(function () {
                // 1. 监听span的点击事件
                $('span').click(function () {
                    $('.ad').remove()
                })
                // 2. 执行广告动画
                $('.ad').stop().slideDown(1000).fadeOut(1000).fadeIn(1000)
            })

        </script>
    </head>

    <body>
        <div class="ad">
            <img src="https://ae03.alicdn.com/kf/U2f875afd3ec347f38fc58fc5a091f97dd.jpg" alt="">
            <span></span>
        </div>
    </body>

</html>

自定义动画

自定义动画的方法为animate，可接收三个或四个参数：

三个参数

三个参数分别为动画代码，时长，回调函数

$('button').eq(0).click(function () {
    $('.one').animate({
        width: 500
    }, 1000, function () {
        alert('自定义动画执行完毕')
    })
})

四个参数

四个参数分别表示：

第一个参数

接收一个对象，可在对象中修改属性
第二个参数

指定动画时长
第三个参数

指定动画节奏，默认是swing
第四个参数

动画执行完毕之后的回调函数

$('button').eq(0).click(function () {
    $('.one').animate({
        marginLeft: 500
    }, 5000, function () {
        // alert('自定义动画执行完毕')
    })
})
$('button').eq(0).click(function () {
    $('.two').animate({
        marginLeft: 500
    }, 5000, 'linear', function () {
        // alert('自定义动画执行完毕')
    })
})

累加属性

累加属性就是在原来基础上再次增加。在第一个参数值得位置填写字符传表达式即可。

$('button').eq(1).click(function () {
    $('.two').animate({
        width: "+=100"
    }, 1000, function () {
        alert('自定义动画执行完毕')
    })
})

关键字

关键字属性即传值时传入关键字，例如 hide,toggle

$('button').eq(2).click(function () {
    $('.two').animate({
        // width: 'hide'
        width: 'toggle'
    }, 1000, function () {
        alert('自定义动画执行完毕')
    })
})

stop方法和delay方法

delay(time)用于延迟动画。例如：

$('.one').animate({
    width: 500,
}, 1000).delay(2000).animate({
    height: 500
}, 1000)

stop(bool)方法表示停止动画，但其可以传入参数：

$('.one').animate({
    width: 500,
}, 2000).animate({
    height: 500
}, 2000).animate({
    height: 100
}, 2000).animate({
    width: 100
}, 2000)

例如如上代码，完整的效果为：

stop(true)与stop(true,false)

立即停止当前所有动画，包括后续动画
stop()、stop(false)、stop(false,false)

立即停止当前所有动画，继续执行后续的动画
stop(false,true)

立即完成当前动画，继续执行后续动画
stop(true true)

立即完成当前的，并且停止后续所有

图标特效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 400px;
            height: 250px;
            border: 1px solid #000;
            margin: 100px auto;
        }

        ul>li {
            width: 100px;
            height: 50px;
            margin-top: 50px;
            text-align: center;
            float: left;
            overflow: hidden;
        }

        ul>li>span {
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url('https://ae02.alicdn.com/kf/U8f6d143a1f9d4323976a7df7486f7e2cT.jpg') no-repeat 0 0;
            position: relative;

        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function () {
            // 1. 遍历所有li
            $('li').each(function (index, ele) {
                var $url = "url('https://ae02.alicdn.com/kf/U8f6d143a1f9d4323976a7df7486f7e2cT.jpg') no-repeat 0 " + index * -24 + "px"
                // 1.2 设置新的图片位置
                $(this).children('span').css('background', $url)
            })
            // 2 监听li移入事件
            $('li').mouseenter(function () {
                // 2.1 将图片上移
                $(this).children('span').animate({
                    top: -50
                }, 1000, function () {
                    // 2.2 将图标定位到下方
                    $(this).css('top', '50px')
                    // 2.3 将图标复位
                    $(this).animate({
                        top: 0
                    }, 1000)
                })
            })
        })

    </script>
</head>

<body>
    <ul>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
        <li><span></span>
            <p>百度</p>
        </li>
    </ul>
</body>

</html>

无限循环滚动

为了让图片无缝衔接，需要在末尾添加与开头两个一模一样的元素。即html元素就变成了

        <div>
            <ul>
                <li><img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>
                <li><img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>
                <li><img src="https://ae01.alicdn.com/kf/U3f740877f20040bd8f37c94440f26b569.jpg"></li>
                <li><img src="https://ae03.alicdn.com/kf/Ua2b193cb94224ed796104020743af8aes.jpg"></li>
                <li><img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>
                <li><img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>
            </ul>
        </div>

鼠标移入事件

鼠标移入时，应停止当前动画并且为所有非当前选中的元素添加模板。

// 停止动画
clearInterval(timer)
// 给非当前选中添加模板
$(this).siblings().fadeTo(100, 0.5)

鼠标移出时

让图片继续滚动，并且去除所有蒙版

// 继续滚动
autoPlay()
// 去除所有的蒙版
$('li').fadeTo(100, 1)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 600px;
            height: 161px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }

        ul {
            width: 1800px;
            list-style: none;
            height: 161px;
            background: #000;
        }

        ul>li {
            float: left;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function () {
            // 0 定义遍历保存偏移位
            var offset = 0
            // 1. 让图片滚动起来
            var timer;
            function autoPlay() {
                timer = setInterval(function () {
                    offset += -10
                    if (offset <= -1200) {
                        offset = 0
                    }
                    $('ul').css('marginLeft', offset)
                }, 50)
            }
            autoPlay()
            // 2. 监听li的移入和移出事件
            $('li').hover(function () {
                // 停止动画
                clearInterval(timer)
                // 给非当前选中添加模板
                $(this).siblings().fadeTo(100, 0.5)
            }, function () {
                // 继续滚动
                autoPlay()
                // 去除所有的蒙版
                $('li').fadeTo(100, 1)
            })
        })
    </script>
</head>

<body>
    <div>
        <ul>
            <li><img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>
            <li><img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>
            <li><img src="https://ae01.alicdn.com/kf/U3f740877f20040bd8f37c94440f26b569.jpg"></li>
            <li><img src="https://ae03.alicdn.com/kf/Ua2b193cb94224ed796104020743af8aes.jpg"></li>
            <li><img src="https://ae01.alicdn.com/kf/U1a8fa2929bca4fddb8b38411e9751104b.jpg"></li>
            <li><img src="https://ae04.alicdn.com/kf/Ue87bb1c5ad4c4c8c9c3a664f3619b126h.jpg"></li>
        </ul>
    </div>
</body>

</html>