jQuery動畫使用總結

時間 2019-11-12

原文原文鏈接

jQuery動畫我用的比較多的僅僅只有show和hide，可是做爲一個被咱們大多數人所熟知的框架，相信他的動畫功能仍是比較多樣的，這裏作個小總結。javascript

1.jQuery animate()，用於建立自定義動畫。

語法：css

$(selector).animate({params},speed,callback);

params:動畫要操做的屬性，幾乎包括全部的css屬性，不過須要注意，當要操做注入padding-left等時須要使用camel命名法，不能用小橫線這種方式命名屬性。同時，除了使用絕對值方式操做屬性值，還可使用相對值得方式，也就是在原來的基礎上加減值。html

speed:動畫速度，能夠是fast，slow，也能夠是毫秒值。java

callback:動畫完成後執行的函數名稱。jquery

看一個例子：框架

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery動畫</title>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    </head>

    <body>
        <button class="btn">開始動畫</button>
        <div style="width: 400px;background-color: pink;" class="wrap">
            <div style="width: 100px;background-color: lightcyan" class="content">i am content</div>
        </div>
    </body>
    <script>
        $('.btn').on('click', function() {
            $('.wrap').animate({
                height: '300px',//可使用絕對值
                padding:'30px',
            }, 1000, function() {
                $('.content').animate({
                    width:'+=200px',//也可使用相對值，在原來的基礎上加或者減
                    marginTop:'100px'//camel命名法操做多個單詞拼接的屬性值
                }, 1000, function() {
                    alert('動畫執行完畢！');
                });
            });
            
        });
    </script>

</html>

給動畫使用預約義值：slow，fast，toggleide

        $('.btn').on('click', function() {
            $('.wrap').animate({
                height: 'toggle'
            });
        });

toggle會讓元素的height在沒有到初始值之間切換。函數

使用動畫的隊列功能：若是給同一個元素，按照順序定義不一樣的動畫，則動畫會按照定義順序依次執行動畫

        $('.btn').on('click', function() {
            $('.wrap').animate({heigt:'100px'});
            $('.wrap').animate({width:'200px'});
        });

若是咱們把寬高變化，寫在同一個animate中，則他們會同時變化，這樣分開寫，他們會按照咱們書寫的順序，依次執行。spa

2.jQuery stop()，中止動畫。

jQuery stop() 方法用於中止動畫或效果，在它們完成以前。

stop() 方法適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。

所以，默認地，stop() 會清除在被選元素上指定的當前動畫。

3.show()和hide():顯示和隱藏元素，可帶參數，決定動畫的快慢。

duration：決定動畫執行快慢的參數，可取fast，slow，normal和具體的數值，單位是毫秒。

easing：過渡的緩動函數，jQuery中提供兩種勻速和變速，linear表示勻速直線運動，而swing則表示變速運動。

4.toggle():切換動畫

5.slideUp()和slideDown(),slideToggle():上下動態隱藏元素

        $('.btn').on('click', function() {
            $('.wrap').slideToggle();
        });

6.fadeIn(),fadeOut(),fadeToggle():淡入淡出顯示和隱藏元素

7.fadeTo():讓元素變化爲固定的透明度

        $('.btn').on('click', function() {
            $('.wrap').fadeTo('slow',.5);
        });

通常來講，toggle是該動畫分類中兩個相反子動畫的組合動畫，所以後面的例子都未給出。這些jQuery動畫，除了自定義動畫之外，基本分爲三大類，fade，slide和show。show類動畫是高度和透明度同時變化來顯示和隱藏的動畫。fade是改變透明度顯示和隱藏的動畫，slide類是經過改變高度來顯示和隱藏的動畫。

小結：在使用jQuery動畫的過程當中，若是咱們但願同時改變高度和透明度，則使用show和hide。若是隻但願改變高度，則使用slideUp和slideDown，若是隻但願改變透明度則使用fadeIn和fadeOut。若是但願改變多個屬性或者其餘效果，則使用自定義動畫。

相關標籤/搜索

每日一句

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