jQuery动画 - 爱码网

1. 基本效果

show([s,[e],[fn]])        显示隐藏的匹配元素
hide([s,[e],[fn]])        隐藏显示的元素
toggle([s],[e],[fn])    如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn        : 在动画完成时执行的函数，每个元素执行一次。

2. 滑动效果

slideDown([s],[e],[fn])        通过高度变化（向下增大）来动态地显示所有匹配的元素
slideUp([s,[e],[fn]])        通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideToggle([s],[e],[fn])    通过高度变化来切换所有匹配元素的可见性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动播放</title>
    <style>
        body {
            background:#ccc;
        }
        #box {
            margin:100px auto;
            width: 1000px;
            height: 460px;
            background:#ccc;
            overflow: hidden;
        }

        ul {
            list-style:none;
            padding:0;
            margin:0;
        }
        p {
            margin:0;
        }
        #box li {
            height:100px;
            margin-bottom:20px;
            background: #fff
        }
        #box li img{
            float:left;
            width:100px;
            height: 100px;
        }
        #box li p {
            float:right;
            width:850px;
            line-height: 100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="newsList">
            <li>
                <img src="../../dist/images_one/meinv02.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>

            <li>
                <img src="../../dist/images_one/1.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>

            <li>
                <img src="../../dist/images_one/2.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>

            <li>
                <img src="../../dist/images_one/3.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>

            <li>
                <img src="../../dist/images_one/4.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>

            <li>
                <img src="../../dist/images_one/11.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>

            <li>
                <img src="../../dist/images_one/10.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>

            <li>
                <img src="../../dist/images_one/9.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>

            <li>
                <img src="../../dist/images_one/8.jpg" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ea.</p>
            </li>
        </ul>
    </div>


    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            setInterval(function(){
                $(\'#box li\').eq(3).fadeTo(500, 0, function(){
                    $(\'#box li\').last().fadeTo(0,1).hide().prependTo(\'#newsList\').slideDown();
                })
            }, 2000)
        })
    </script>
</body>
</html>

应用：新闻滚动播放

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn        : 在动画完成时执行的函数，每个元素执行一次。

3 淡入淡出效果

fadeIn([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]])    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo([[s],o,[e],[fn]])    把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn        : 在动画完成时执行的函数，每个元素执行一次。

opacity    : (用户fadeTo)一个0至1之间表示透明度的数字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            border: 2px solid pink;
        }

        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>动画效果</h1>
    <hr>

    <button id="hide_btn">隐藏</button>
    <button id="show_btn">显示</button>
    <button id="toggle_btn">切换</button>
    <br>

    <button id="slideDownBtn">slideDown显示</button>
    <button id="slideUpBtn">slideUp隐藏</button>
    <button id="slideToggleBtn">slideToggle切换</button>

    <br>
    <button id="fadeOutBtn">淡出</button>
    <button id="fadeInBtn">淡入</button>
    <button id="fadeToggleBtn">切换</button>
    <button id="fadeToBtn">fadeTo</button>

    <br>
    <br>
    <br>

     <div id="box">
        <img src="../../dist/images_one/10.jpg" alt="">
    </div>



    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){

            //淡入淡出效果
            $(\'#fadeOutBtn\').on(\'click\', function(){

                //$(\'#box\').fadeOut()
                $(\'#box\').fadeOut(2000)  // 通过不透明度的变化来实现所有匹配元素的淡出效果，淡出后不再占据位置,k可以设置时间
            })
            $(\'#fadeInBtn\').on(\'click\', function(){

                //$(\'#box\').fadeOut()
                $(\'#box\').fadeIn(5000)   //  通过不透明度的变化来实现所有匹配元素的淡入效果，可以将淡出的元素在淡入显示出来
            })
            $(\'#fadeToggleBtn\').on(\'click\', function(){

                //$(\'#box\').fadeOut()
                $(\'#box\').fadeToggle(2000)      // 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,即可以实现淡入淡出的来回切换
            });
            $(\'#fadeToBtn\').on(\'click\', function(){
                /*$(\'#box\').fadeTo(3000, .5, function(){
                    console.log(\'fadeTo\')
                })*/
                //alert(\'ok\')
                $(\'#box\').fadeTo(1000, .5)     // 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
            })


            //滑动效果
            $(\'#slideUpBtn\').on(\'click\', function(){
                //$("#box").slideUp();
                //$("#box").slideUp(\'slow\');
                //$("#box").slideUp(3000);
                $("#box").slideUp(3000, function(){   //将元素向上进行滑动隐藏

                });
            });

            $(\'#slideDownBtn\').on(\'click\', function(){
                $(\'#box\').slideDown(5000)     //将元素进行向下滑动进行显示
            })


            //基本效果
            $(\'#hide_btn\').click(function(){
                //$(\'#box\').hide();
                //$(\'#box\').hide(\'fast\');
                //$(\'#box\').hide(\'normal\');
                //$(\'#box\').hide(\'slow\');
                //$(\'#box\').hide(5000);       //隐藏显示的元素，以左上角为中心
                $(\'#box\').hide(2000, function(){
                    console.log(\'啊，我隐藏了\');
                });
            });

            $(\'#show_btn\').click(function(){
                $(\'#box\').show(3000)      //显示隐藏的元素
            });
            $(\'#toggle_btn\').click(function(){
                $(\'#box\').toggle(3000, function(){      //元素在显示与隐藏来回进行切换
                    console.log(\'toggle\');
                })
            })
        })
    </script>
</body>
</html>

4 自定义动画

animate(p,[s],[e],[fn])

参数详解

params    : 一组包含作为动画属性和终值的样式属性和及其值的集合
speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn        : 在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            overflow: hidden;
            width:400px;
            height:200px;
            border:2px solid #ccc;
            padding:20px;
        }
    </style>
</head>
<body>
    <h1>自定义动画</h1>
    <hr>
    <button id="btn">隐藏</button>
    <button id="btn1">显示</button>
    <button id="btn2">切换</button>

    <hr>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et necessitatibus cumque accusamus iure eius expedita, dolore, nobis ut maiores dignissimos consectetur saepe repudiandae, libero molestias deserunt veritatis facere vitae.</div>

    <script src="../jquery-3.3.1.js"></script>
    <script>
        $(function(){
            $(\'#btn\').click(function(){
                $(\'#box\').animate({
                    \'width\':\'0px\',        //自定义向左隐藏
                    \'padding-left\':\'0px\',
                    \'padding-right\':\'0px\'    
                }, 2000, function(){
                    $(this).hide();
                })
            });


            $(\'#btn1\').click(function(){
                $(\'#box\').show().animate({
                    \'width\':\'400px\',
                    \'padding-left\':\'20px\',
                    \'padding-right\':\'20px\'    
                }, 2000)
            });


            $(\'#btn2\').click(function(){
                $(\'#box\').animate({
                    \'width\':\'toggle\',
                    \'padding-left\':\'toggle\',
                    \'padding-right\':\'toggle\'    
                }, 2000)
            })
        })
    </script>
</body>
</html>

自定义动画

5 动画控制

stop([c],[j])        停止所有在指定元素上正在运行的动画
delay(d,[q])        设置一个延时来推迟执行队列中之后的项目
finish([queue])        停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            overflow: hidden;
            width:400px;
            height:200px;
            border:2px solid #ccc;
            padding:20px;
        }
    </style>
</head>
<body>
    <h1>动画控制</h1>
    <hr>
    <button id="btn">隐藏</button>
    <button id="btn1">显示</button>
    <button id="btn2">切换</button>

    <br>
    <button id="btn3">动画</button>
    <button id="btn4">finish</button>
    <button id="btn5">stop</button>

    <hr>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas et necessitatibus cumque accusamus iure eius expedita, dolore, nobis ut maiores dignissimos consectetur saepe repudiandae, libero molestias deserunt veritatis facere vitae.</div>

    <script src="../jquery-3.3.1.js"></script>
    <script>


        $(function(){

            $(\'#btn4\').on(\'click\', function() {
                $(\'#box\').finish();
            })

            $(\'#btn5\').on(\'click\', function() {
                $(\'#box\').stop();
            })

            $(\'#btn3\').on(\'click\', function(){
                //如果 box元素 正在执行  return false
                if ($(\'#box\').is(\':animated\')) {
                    return false;
                }

                //动画队列 delay
                $(\'#box\').slideUp(3000).delay(2000).show(2000).fadeOut(2000).slideDown(3000)
            })

            $(\'#btn\').click(function(){
                $(\'#box\').animate({
                    \'width\':\'0px\',
                    \'padding-left\':\'0px\',
                    \'padding-right\':\'0px\'    
                }, 2000, function(){
                    $(this).hide();
                })
            });


            $(\'#btn1\').click(function(){
                $(\'#box\').show().animate({
                    \'width\':\'400px\',
                    \'padding-left\':\'20px\',
                    \'padding-right\':\'20px\'    
                }, 2000)
            });


            $(\'#btn2\').click(function(){
                $(\'#box\').animate({
                    \'width\':\'toggle\',
                    \'padding-left\':\'toggle\',
                    \'padding-right\':\'toggle\'    
                }, 5000)
            })
        })
    </script>
</body>
</html>

动画控制

6 设置

//关闭页面上所有的动画
jQuery.fx.off = true;