jQuery 之 [ 动画 ]

2024年1月24日 168次阅读来源: 蔡志远

jQuery动画

分为预定义动画和自定义动画

预定义动画

显示和隐藏动画效果
滑动式动画效果
淡入和淡出动画效果

显示和隐藏

show( )方法
- 表示显示动画效果“括号中填写动画执行的时间 – 毫秒”
hide( )方法
- 表示隐藏动画效果“括号中填写动画执行的时间 – 毫秒”
toggle( )方法
- 表示显示和隐藏的动画效果“括号中填写动画执行的时间 – 毫秒”

<body>
<button id="b1">显示</button>
<button id="b2">隐藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        显示和隐藏动画效果
        show( )方法 - 表示显示动画效果“括号中填写动画执行的时间 - 毫秒”
        hide( )方法 - 表示隐藏动画效果“括号中填写动画执行的时间 - 毫秒”
     */
    /* 定位显示和隐藏按钮位置 */
    var $b1 = $( '#b1' );
    var $b2 = $( '#b2' );
    /* 定位执行动画元素的位置 */
    var $d1 = $( '#d1' );
    /* 为指定元素绑定事件 */
    $b1.click( function () {
        /* 为指定元素设置显示动画效果 */
        $d1.show( 5000 );
    } );
    /* 为指定元素绑定事件 */
    $b2.click( function () {
        /* 为指定元素设置隐藏动画效果 */
        $d1.hide( 5000 );
    } );
     /* 为指定按钮绑定事件 */
    $b1.click( function () {
        /* 为指定元素设置显示和隐藏的动画效果 */
        $d1.toggle( 5000 );
    } );
</script>
</body>

滑动式动画

slideDown( )方法
- 表示从上向下滑动“括号中填写动画执行时间 – 毫秒”
slideUp( )方法
- 表示从下向上滑动“括号中填写动画执行时间 – 毫秒”
slideToggle( )方法
- 表示滑动式动画效果“括号中填写动画执行时间 – 毫秒”

<body>
<button id="b1">显示</button>
<button id="b2">隐藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        滑动式动画
        slideDown( )方法 - 表示从上向下滑动“括号中填写动画执行时间 - 毫秒”
        slideUp( )方法 - 表示从下向上滑动“括号中填写动画执行时间 - 毫秒”
     */
    /* 定位显示和隐藏按钮位置 */
    var $b1 = $( '#b1' );
    var $b2 = $( '#b2' );
    /* 定位执行动画元素的位置 */
    var $d1 = $( '#d1' );
    /* 为指定元素绑定事件 */
    $b1.click( function () {
        /* 为指定元素设置从上向下滑动动画效果 */
        $d1.slideDown( 5000 );
    } );
    /* 为指定元素绑定事件 */
    $b2.click( function () {
        /* 为指定元素设置从下向上滑动动画效果 */
        $d1.slideUp( 5000 );
    } );
    /* 为指定按钮绑定事件 */
    $b1.click( function () {
        /* 为指定元素设置滑动式动画效果 */
        $d1.slideToggle( 5000 );
    } );
</script>
</body>

淡入和淡出

fadeIn( )方法
- 表示淡入动画效果“括号中填写动画执行时间 – 毫秒”
fadeOut( )方法
- 表示淡出动画效果“括号中填写动画执行时间 – 毫秒”
fadeToggle( )方法
- 表示淡入和淡出的动画效果“括号中填写动画执行时间 – 毫秒”

<body>
<button id="b1">显示</button>
<button id="b2">隐藏</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        淡入和淡出动画效果
        fadeIn( )方法 - 表示淡入动画效果“括号中填写动画执行时间 - 毫秒”
        fadeOut( )方法 - 表示淡出动画效果“括号中填写动画执行时间 - 毫秒”
     */
    /* 定位显示和隐藏按钮位置 */
    var $b1 = $( '#b1' );
    var $b2 = $( '#b2' );
    /* 定位执行动画元素的位置 */
    var $d1 = $( '#d1' );
    /* 为指定元素绑定事件 */
    $b1.click( function () {
        /* 为指定元素设置淡入动画效果 */
        $d1.fadeIn( 5000 );
    } );
    /* 为指定元素绑定事件 */
    $b2.click( function () {
        /* 为指定元素设置淡出动画效果 */
        $d1.fadeOut( 5000 );
    } );
    /* 为指定按钮绑定事件 */
    $b1.click( function () {
        /* 为指定元素设置淡入和淡出的动画效果 */
        $d1.fadeToggle( 5000 );
    } );
</script>
</body>

自定义动画

animate（）方法

表示设置动画显示效果
- 括号中填写
- 动画执行效果 – css样式“用大括号｛｝包裹”
- 动画执行时间 – 毫秒
- 动画返回函数

<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        自定义动画
        animate（ ）方法 - 表示设置动画显示效果
         括号中填写：
         * 动画执行效果 - css样式“用大括号｛｝包裹”
         * 动画执行时间 - 毫秒
         * 动画返回函数
     */
    var $div = $( '#d1' );
    $div.animate( {
        top : '300px',
        left : '300px'
    }, 5000 );
</script>
</body>

动画的并发和排队

并发
- 表示同时执行设置的动画效果
排队
- 表示前一个设置的动画效果执行完毕在执行下一个

<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        动画的并发和排队
        并发 - 表示同时执行设置的动画效果
        排队 - 表示前一个设置的动画效果执行完毕 在执行下一个
     */
    /* 并发执行动画效果 */
    var $div = $( '#d1' );
    $div.animate( {
        top : '300px',
        left : '300px'
    }, 5000 );

    /* 排队执行动画效果 */
    $div.animate( {
        top : '300px'
    },3000 ).animate( {
        left : '300px'
    },3000 );
</script>
</body>

停止动画

stop( )方法

表示目标元素执行的动画效果停止
- 括号中填写两个参数 – 布尔值
- 一个true时 – 表示停止目标元素的所有动画效果
- 两个true时 – 表示停止目标元素的所有动画效果并且结束当前执行的动画
- 不填写时 – 表示停止目标元素当前正在执行的动画效果

<body>
<button id="ks">开始</button>
<button id="tz">停止</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        停止动画
        stop( )方法 - 表示目标元素执行的动画效果停止
         * 括号中填写两个参数 - 布尔值
         * 一个true时 - 表示停止目标元素的所有动画效果
         * 两个true时 - 表示停止目标元素的所有动画效果并且结束当前执行的动画
         * 不填写时 - 表示停止目标元素当前正在执行的动画效果
     */
    /* 定位开始按钮位置 */
    var $ks = $( '#ks' );
    /* 定位停止按钮位置 */
    var $tz = $( '#tz' );
    /* 定位绑定事件元素的位置 */
    var $d1 = $( '#d1' );
    /* 为指定元素绑定事件 */
    $ks.click( function () {
        /* 为指定元素设置动画效果 */
        $d1.animate( {
            left : '1000px'
        }, 3000 ).animate( {
            top : '1000px'
        }, 3000 );
    } );
    /* 为指定元素绑定事件 */
    $tz.click( function () {
        /* 为指定元素设置动画停止效果 */
        $d1.stop( true, true  );
    } );
</script>
</body>

延迟执行动画

delay( )方法

表示为指定元素设置的动画效果进行延迟执行“括号中填写动画延迟多少时间 – 毫秒”

<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        延迟执行动画
        delay( )方法 - 表示为指定元素设置的动画效果进行延迟执行
         * 括号中填写延迟多少时间 - 毫秒
     */
    $( '#d1' ).delay( 2000 ).animate( {
        left : '1000px'
    }, 5000 );
</script>
</body>

    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016329523
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

jQuery动画

预定义动画

显示和隐藏

滑动式动画

淡入和淡出

自定义动画

animate（ ）方法

动画的并发和排队

停止动画

stop( )方法

延迟执行动画

delay( )方法

animate（）方法