jQuery的动画效果

显/示隐藏/切换动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        div{
            width: 500px;
            height: 500px;
            background-color: red;
            display: none;
        }
    </style>
    <script type="text/javascript" src="../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var flag = true;
        $(function(){
            // let flag = true; //内部使用let才好使。
            $('.box1').click(function(){
                $('div').show(2000);
            });
            $('.box2').click(function(){
                $('div').hide(2000);
            });
            $('.box3').click(function(){

                if(flag){
                    $('div').show(2000);
                    flag = false;
                }else{
                    $('div').hide(2000);
                    flag = true;
                }
            });
        })
    </script>
</head>
<body>
    
    <button class="box1">显示</button>
    <button class="box2">隐藏</button>
    <button class="box3">切换</button>
    <div></div>
</body>
</html>

开关式显示隐藏动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
    <script type="text/javascript" src="../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                $('div').toggle(2000,function(){
                    $(this).text('盒子出来了');
                    console.log($(this));
                    if($('#btn').text() =='隐藏'){
                        $('#btn').text('显示');
                    }else{
                        $('#btn').text('隐藏');
                    }
                })
            })
        })
    </script>
</head>
<body>
    <button id="btn">显示</button>
    <div></div>
</body>
</html>

滑入和滑出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            display: none;
        }
    </style>
    <script type="text/javascript" src="../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var flag = true;
        $(function(){
            // let flag = true;
            $('.b1').click(function(){
                $('div').slideDown(2000,function(){
                    $(this).text('滑出来了')
                    flag = false;
                })
            })
            $('.b2').click(function() {
                $('div').slideUp(2000,function(){
                    $(this).text('');
                    flag = true;
                })
            });
            $('.b3').click(function(){
                if(flag){
                    $('div').slideDown(2000,function(){
                    $(this).text('滑出来了')
                    flag = false;
                })
                }else{
                    $('div').slideUp(2000,function(){
                    $(this).text('');
                    flag = true;
                })
                }                
            })
        })
    </script>
</head>
<body>
    <button class="b1">滑入</button>
    <button class="b2">滑出</button>
    <button class="b3">切换滑动</button>
    <div></div>
</body>
</html>

淡入淡出动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
    <script type="text/javascript" src="../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.b1').click(function(){
                if($(this).text() == '淡入'){
                    $('div').fadeIn(2000);
                    $(this).text('淡出');
                }else{
                    $('div').fadeOut(2000);
                    $(this).text('淡入');
                }
            });
            $('.b2').click(function(){
                $('div').fadeToggle(2000);
            })
        })
    </script>
</head>
<body>
    <button class="b1">淡入</button>
    <button class="b2">切换</button>
    <div></div>
</body>
</html>

通过改变透明度，切换匹配元素的显示或隐藏状态：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            display: none;
            opacity:1;
            background-color: red;
        }
    </style>
    <script type="text/javascript" src="../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('button:eq(0)').click(function(){
                $('div').fadeIn(2000);
            })
            $('button:eq(1)').click(function(){
                $('div').fadeOut(2000);
            });
            $('button:eq(2)').click(function(){
                $('div').fadeToggle(1000);
            })
            $('button:eq(3)').click(function(){
                $('div').fadeTo(1000,0.1,function(){
                    alert('更改透明度成功')
                })
            })
        })
    </script>
</head>
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>改透明度0.5</button>
    <div></div>
</body>
</html>

自定义动画：

$(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

　　1，第一个参数表示：要执行动画的CSS属性(必选)。

　　2，第二个参数表示：执行动画的时长。

　　3，第三个参数表示：动画执行完毕后，立即执行的回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script type="text/javascript" src="../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('button').click(function(){
                var json = {
                    'width':500,
                    'height':500,
                    'left':300,
                    'top':300,
                    'border-radius':100
                };
                var json2 = {
                    'width':100,
                    'height':100,
                    'left':100,
                    'top':100,
                    'border-radius':50
                };
                $('div').animate(json,1000,function(){
                    $('div').animate(json2,1000,function(){
                        alert("执行完毕！");
                    })
                })
            })
        })
    </script>
</head>
<body>
    <button>自定义动画</button>
    <div></div>
</body>
</html>

停止动画：

扫描二维码关注公众号，回复： 1287375 查看本文章

$(selector).stop(true, false);

第一个参数：

　　true：后续动画不执行。

　　false：后续动画会执行。

第二个参数：

　　true：立即执行完成当前动画。

　　false：立即停止当前动画。

参数如果都不写，默认两个都是false。

鼠标悬停时，弹出下拉菜单(下拉时带动画):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        ul{
            list-style: none;
        }
        .wrap{
            width: 330px;
            height: 30px;
            margin:100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

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

        .wrap a{
            /*display: none;*/
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: black;
            line-height: 30px;
            text-align:center;
        }
        .wrap li ul{
            position:absolute;
            top:30px;
            display: none;
        }
    </style>
    <script type="text/javascript" src='../../jquery-3.3.1.js'></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var jqli = $('.wrap>ul>li');
            jqli.mouseenter(function(){
                $(this).children('ul').stop().slideDown(1000);
            });
            jqli.mouseleave(function(){
                $(this).children('ul').stop().slideUp(1000);
            });
        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="javascript:;">一级菜单1</a>
                <ul>
                    <li><a href="javascript:;">一级菜单2</a></li>
                    <li><a href="javascript:;">一级菜单3</a></li>
                    <li><a href="javascript:;">一级菜单4</a></li>
                </ul>
            </li>
            <li><a href="">二级菜单1</a>
                <ul>
                    <li><a href="javascript:;"></a>二级菜单2</li>
                    <li><a href="javascript:;"></a>二级菜单3</li>
                    <li><a href="javascript:;"></a>二级菜单4</li>
                </ul>
            </li>
            <li><a href="">三级菜单1</a>
                <ul>
                    <li><a href="javascript:;">三级菜单2</a></li>
                    <li><a href="javascript:;">三级菜单3</a></li>
                    <li><a href="javascript:;">三级菜单4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

PS:

javascript:void(0); //跟javascript:;效果一样

上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。