jQuery 之 [ 动画 ]

头像
蔡志远
    阅读 5 分钟

    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>
    前端jquery
    蔡志远
    9 声望5 粉丝
    « 上一篇
    jQuery 之 [ 事件 ]
    下一篇 »
    jQuery中的工具和插件

    引用和评论

    推荐阅读
    头像
    Ajax 之 [ jQuery中的Ajax ]

    蔡志远阅读 1.3k

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    0 条评论
    得票最新