jQuery之动画

Posted hfl1996

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery之动画相关的知识,希望对你有一定的参考价值。

滑动

说明:

  不断改变元素的高度来实现的

方法:

  slideDown():带动画的展开。

  slideUp():带动画的收缩。

  slideToggle():带动画的切换展开/收缩。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动</title>
    <style type="text/css">
        * {
            margin: 0px;
        }
        .div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 10px;
            background: red;
        }
    </style>
</head>
<body>

<button id="btn1">慢慢收缩</button>
<button id="btn2">慢慢展开</button>
<button id="btn3">收缩/展开切换</button>

<div class="div1">

</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 需求:
     * 1.点击btn1,向上滑动
     * 2.点击btn3,向下滑动
     * 3.点击btn3,向上/向下切换
     */
    $(function (){
        //1.点击btn1,向上滑动
        $(#btn1).click(function () {
            $(div).slideUp()
        });
        //2.点击btn3,向下滑动
        $(#btn2).click(function () {
            $(div).slideDown()
        });
        //3.点击btn3,向上/向下切换
        $(#btn3).click(function () {
            $(div).slideToggle(2000)
        });
    });
</script>
</body>
</html>

淡入淡出

说明:

  不断改变元素的透明度来实现的。

方法:

  fadeIn():带动画的显示。

  fadeOut():带动画隐藏。

  fadeToggle():带动画切换显示/隐藏。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <style type="text/css">
        * {
            margin: 0px;
        }
        .div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 10px;
            background: red;
        }
    </style>
</head>
<body>

<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">淡出/淡入切换</button>

<div class="div1">

</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 需求:
     * 1.点击btn1,慢慢淡出
     *  无参
     *  有参:
     *      字符串参数
     *      数字参数
     * 2.点击btn3,慢慢淡入
     * 3.点击btn3,淡出/淡入切换,动画结束时提示动画结束了
     *
     */
    $(function (){
        //1.点击btn1,实现慢慢淡出
        $(#btn1).click(function () {
            //$(‘.div1‘).fadeOut();
            //$(‘.div1‘).fadeOut(1000);
            $(.div1).fadeOut(fast);
            /*
             * fast:200
             * normal:400
             * fast:600
             */
        });
        //2.点击btn3,实现慢慢淡入
        $(#btn2).click(function () {
            $(.div1).fadeIn();
        });
        //3.点击btn3,实现淡出/淡入切换
        $(#btn3).click(function () {
            $(.div1).fadeToggle(function () {
                alert(动画结束了);
            })
        });
    });
</script>
</body>
</html>

显示/隐藏

说明:

  不断改变元素的尺寸和透明度来实现,显示隐藏,默认没有动画。

方法:

  show():(不)带动画的显示。

  hide():(不)带动画的隐藏。

  toggle():(不)带动画的切换显示/隐藏。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与隐藏</title>
    <style type="text/css">
        * {
            margin: 0px;
        }
        .div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 10px;
            background: red;
            display: none;
        }
    </style>
</head>
<body>

<button id="btn1">瞬间显示</button>
<button id="btn2">慢慢显示</button>
<button id="btn3">慢慢隐藏</button>
<button id="btn4">显示隐藏切换</button>

<div class="div1">

</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 需求:
     * 1.点击btn1,立即显示
     * 2.点击btn2,慢慢显示
     * 3.点击btn3,慢慢隐藏
     * 4.点击btn4,切换显示/隐藏
     */
    $(function (){
        //1.点击btn1,立即显示
        $(#btn1).click(function () {
            $(div).show();
        });
        //2.点击btn2,慢慢显示
        $(#btn2).click(function () {
            $(div).show(1000);
        });
        //3.点击btn3,慢慢隐藏
        $(#btn3).click(function () {
            $(div).hide(2000);
        });
        //4.点击btn4,切换显示/隐藏
        $(#btn4).click(function () {
            $(div).toggle();
        });
    });
</script>
</body>
</html>

自定义

说明:

  jQuery动画本质是在指定时间内不断改变元素样式值来实现的。

方法:

  animate():自定义动画效果的动画。

  stop():停止动画。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <style type="text/css">
        * {
            margin: 0px;
        }
        .div1 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            left: 300px;
            background: red;
        }
    </style>
</head>
<body>

<button id="btn1">逐渐扩大</button>
<button id="btn2">移动到指定位置</button>
<button id="btn3">移动指定距离</button>
<button id="btn4">停止动画</button>

<div class="div1">
    爱在西元前
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 需求:
     * 1.逐渐扩大
     *      1)宽/高都扩为200px
     *      2)宽先扩为200px,高后扩为200px
     * 2.移动到指定位置
     *      1)移动到(500, 100)处
     *      2)移动到(100, 20)处
     * 3.移动指定的距离
     *      1)移动距离为(100, 50)
     *      2)移动距离为(-100, -20)
     * 4.停止动画
     */

    var $div1 = $(.div1);

    /*
     * 1.逐渐扩大
     *      1)宽/高都扩为200px
     *      2)宽先扩为200px,高后扩为200px
     */
    $(#btn1).click(function () {
        //宽/高都扩为200px
        $div1.animate({
            width: 200,
            height: 200px
         }, 1000);
        //宽先扩为200px,高后扩为200px
        $div1.animate({
            width: 200
        }, 2000)
            .animate({
                height: 200
            }, 2000);
    });

    /*
     * 2.移动到指定位置
     *      1)移动到(500, 100)处
     *      2)移动到(100, 20)处
     */
    $(#btn2).click(function () {
        //移动到(500, 100)处
        $div1.animate({
            left: 500,
            top: 100
        }, 1000);
        //移动到(100, 20)处
        $div1.animate({
            left: 100,
            top: 20
        }, 1000);
    });

    /*
     * 3.移动指定的距离
     *      1)移动距离为(100, 50)
     *      2)移动距离为(-100, -20)
     */
    $(#btn3).click(function () {
        //移动距离为(100, 50)
        $div1.animate({
            left: +=100,
            top: +=50
        }, 1000);
        //移动距离为(-100, -20)
        $div1.animate({
            left: -=100,
            top: -=20
        }, 1000)
    });

    /*
     * 4.停止动画
     */
    $(#btn4).click(function () {
        $div1.stop();//只停止当前运行的动画(后面其它动画还会运行)
        //$div1.stop(true);//停止所有动画
        //$div1.stop(true, true);
    });
</script>
</body>
</html>

以上是关于jQuery之动画的主要内容,如果未能解决你的问题,请参考以下文章

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

jQuery动画之显示动画

JQuery动画之淡入淡出动画

jQuery动画之自定义动画

在jquery中切换动画