04-jquery动画

我想通过点击一个<button>按钮来实现动画效果

淡出淡入动画效果 

第一版：显示动画隐藏动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<button>动画</button>
<div id="box"></div>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function () {
        $('button').click(function () {
            $('#box').hide(3000);
            $('#box').show(3000,function () {
                $(this).text();
            });
        })
    })
</script>
</body>
</html>

第二版：点击一下显示盒子再点击一下隐藏盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<button>动画</button>
<div id="box"></div>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('button').click(function () {
            if (isShow) {
                $('#box').show(3000, function () {
                    $(this).text();
                    isShow = false;
                });
            } else {

                $('#box').hide(3000, function () {
                    $(this).text();
                    isShow = true;
                });
            }
        })
    })
</script>
</body>
</html>

第三版：开关式显示隐藏动画 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<button>动画</button>
<div id="box"></div>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('button').click(function () {
            $('#box').toggle(3000)  //开关
        })
    })
</script>
</body>
</html>

那么问题来了，当动画还在执行当中我们再次点击了动画按钮你会发现他会等你当前动画完全执行完成后再下一次的指令，造成这种原因的就是jquery定时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
<button>动画</button>
<div id="box"></div>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('button').click(function () {
            //使用jquery动画先停再开
            $('#box').stop().toggle(300);
        })
    })
</script>
</body>
</html>

划入划出

1、滑入动画效果：（类似于生活中的卷帘门）

$('#box').slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

2、滑出动画效果： 

 $('#box').slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

3、滑入滑出切换动画效果：

 $('#box').slideToggle(speed, 回调函数);

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 100px;
            width: 100px;
            background-color: orange;
            display: none;
        }
    </style>
</head>
<body>
<button>动画</button>
<div id="box"></div>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('button').click(function () {
            //卷帘门效果
            //$('#box').slideDown(500);
            //$('#box').slideUp(3000)
            $('#box').slideToggle(500);
        })
    })

淡入淡出动画

1、淡入动画效果：

$('#box').fadeIn(2000)

作用：让元素以淡淡的进入视线的方式展示出来。

2、淡出动画效果：

$('#box').fadeOut(1000);

作用：让元素以渐渐消失的方式隐藏起来

3、淡入淡出切换动画效果：

$('#box').fadeToggle('1000');

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 100px;
            width: 100px;
            background-color: orange;
            display: none;
        }
    </style>
</head>
<body>
<button>动画</button>
<div id="box"></div>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function () {
        var isShow = true;
        $('button').click(function () {
            // //淡入淡出
            // $('#box').fadeIn(2000)   //淡出
            $('#box').stop().fadeToggle(2000)   //淡入淡出

        })
    })
</script>
</body>
</html>

 自定义动画

语法：

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

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

  • 第一个参数表示：要执行动画的CSS属性（必选）

  • 第二个参数表示：执行动画时长（可选）

  • 第三个参数表示：动画执行完后，立即执行的回调函数（可选）

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<button>自定义动画</button>
<div></div>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        jQuery(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": 100, "background-color": "red"};

                //自定义动画
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("动画执行完毕！");
                    });
                });

            })
        })
    </script>
</body>
</html>

停止动画

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

里面的两个参数，有不同的含义。

第一个参数：

  • true：后续动画不执行。

  • false：后续动画会执行。

第二个参数：

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

  • false：立即停止当前动画。

PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

posted @ 2019-08-27 14:12  杨灏  阅读(112)  评论(0)    收藏  举报