jQuery 之 [ 動畫 ]

時間 2019-12-05

標籤 jquery 動畫欄目 JQuery 简体版

原文原文鏈接

jQuery動畫

分爲預約義動畫和自定義動畫

預約義動畫

顯示和隱藏動畫效果
滑動式動畫效果
淡入和淡出動畫效果

顯示和隱藏

show( )方法css
- 表示顯示動畫效果「括號中填寫動畫執行的時間 - 毫秒」
hide( )方法jquery
- 表示隱藏動畫效果「括號中填寫動畫執行的時間 - 毫秒」
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( )方法ide
- 表示從上向下滑動「括號中填寫動畫執行時間 - 毫秒」
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( )方法code
- 表示淡入動畫效果「括號中填寫動畫執行時間 - 毫秒」
fadeOut( )方法事件
- 表示淡出動畫效果「括號中填寫動畫執行時間 - 毫秒」
fadeToggle( )方法ip
- 表示淡入和淡出的動畫效果「括號中填寫動畫執行時間 - 毫秒」

<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（）方法

表示設置動畫顯示效果io
- 括號中填寫
- 動畫執行效果 - 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>