【jQuery】之動畫

時間 2019-12-10

標籤 jQuery 動畫欄目 JQuery 简体版

原文原文鏈接

jQueryjquery

1.預約義動畫

顯示與隱藏

show()表示顯示
hide()表示隱藏
speed中以（slow，normal，fast）表示動畫時長併發

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').hide(3000, function(){
        $('#qyc').show(3000);
    });
    /*
    * 顯示與與隱藏
    * 無動畫-改變寬度和高度
    * show()-顯示
    * hide()-隱藏

    * 有動畫
    * show(speed, callback)
     * speed-動畫執行時長
     * callback-動畫執行完畢後回調函數*/
</script>
</body>

滑動式動畫

以slideUp和slideDown來更改屬性的高度值來實現動畫效果ide

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    /*
        滑動式動畫-slideUp()和slideDown()
        * 注意-沒有無動畫版本
        * 效果-改變指定元素的高度
     */
    $('#qyc').slideUp(3000);
    $('#qyc').slideDown(3000);

</script>
</body>

淡入淡出效果

fadeln()方法和fadeOut來改變透明度來實現動畫效果函數

<script src="js/jquery.js"></script>
<style>
    #qyc {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').fadeOut(3000);
    $('#qyc').fadeIn(3000);
    // 改變元素的透明度
</script>
</body>

動畫切換效果

<script src="js/jquery.js"></script>
    <style>
        #qh {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<button id="qyc">按鈕</button>
<div id="qh"></div>
<script>
    $('#qyc').click(function(){
        // $('#qyc').toggle(3000);
        // $('#qyc').slideToggle(3000);
        $('#qh').fadeToggle(3000);
    });
</script>
</body>

2.自定義動畫

<style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>

</head>
<body>
<div id="qyc"></div>
<script>
    /*
    * animate()方法-自定義動畫方法
        1.animate(properties, duration, callback)
          * properties-表示CSS的樣式屬性
            * 設置動畫執行結束的樣式屬性值
          * duration-表示動畫執行的時長，單位爲毫秒
          * callback-表示動畫執行完畢後的回調函數
        2.animate(properties, options)
          * properties-表示CSS的樣式屬性
            * 設置動畫執行結束的樣式屬性值
          * options-表示設置動畫的相關參數
            * duration-表示動畫執行的時長，單位爲毫秒
            * complete-表示動畫執行完畢後的回調函數
            * queue-布爾值，設置是否添加到動畫隊列中
    */
    /*$('#qyc').animate({
        width : 100,
        height : 100
    }, 3000);*/

    /*$('#qyc').animate({
        left : 100
    }, 3000);*/

    $('#qyc').animate({
        left : 100
    }, {
        speed : 3000
    });
</script>
</body>

併發與排隊效果

指同時進行多個動畫效果，並以前後順序執行動畫

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    /*$('#qyc').animate({
        left : 400,
        top : 400
    }, 3000);*/
    /*併發效果-就是指多個動畫同時執行
     *多個CSS樣式屬性值同時改變-動畫多個值綜合效果
     */

    $('#qyc').animate({
        left : 400
    }, 3000, function(){
        $('#qyc').animate({
            top : 400
        }, 3000);
    });
    /*
      排隊效果 - 就是指多個動畫按照定義前後順序執行
      多個CSS的樣式屬性值前後改變
     */
    $('#qyc').animate({
        left : 400
    }, {
        duration : 3000
    }).animate({
        top : 400
    }, {
        duration : 3000,
        queue : true
    });
</script>
</body>

中止動畫效果

以stop()方法表示中止指定元素運行的動畫以gotoEnd表示動畫馬上執行完成code

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="start">開始</button>
<button id="stop">中止</button>
<div id="qyc"></div>
<script>
    $('#start').click(function(){
        $('#qyc').animate({
            left : 800
        }, 3000).animate({
            top : 600
        }, 3000);
    });
    $('#stop').click(function(){
        /*
            * stop()方法沒有接收任何參數時-中止執行動畫
            * stop(queue)方法的第一個參數
              * false-中止當前動畫，但隊列中動畫繼續執行
              * true-中止當前動畫，而且清空動畫

         */
        $('#qyc').stop(true, false);
    });
</script>
</body>

延遲執行動畫

以delay()方法設置延時必定時間，在執行動畫效果orm

<script src="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').animate({
        left: 800
    }, 5000).delay(1000).animate({
        top: 600
    }, 5000);

</script>
</body>

1. jQuery 之 [ 動畫 ]
2. JQuery第五天之JQuery動畫
3. JQuery動畫
4. jquery動畫
5. jQuery動畫
6. jQuery 動畫
7. JQuery animate動畫
8. 24.jQuery動畫
9. Jquery 動畫
10. jquery——動畫
更多相關文章...
• ionic 加載動畫 - ionic 教程
• jQuery Mobile 表單滑動條 - jQuery Mobile 教程
• 算法總結-滑動窗口
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。