Jquery動畫效果

時間 2020-05-06

標籤 jquery 動畫效果欄目 JQuery 简体版

原文原文鏈接

根據 jquery官網api文檔編寫 https://www.jq22.com/chm/jquery/index.html javascript

1、基本效果css

關於如下屬性中的 easing 想要更好的去了解這個屬性 https://www.runoob.com/jqueryui/api-easings.html 我想這裏會更加清晰明瞭
html

1.show() 顯示隱藏的匹配元素。語法：show([speed,[easing],[fn]])java

speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)jquery

fn:在動畫完成時執行的函數，每一個元素執行一次（回調函數）。api

2.hide() 顯示隱藏的匹配元素。語法：hide([speed,[easing],[fn]])ide

speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)函數

fn:在動畫完成時執行的函數，每一個元素執行一次（回調函數）。學習

3.toggle() 1.9版本 .toggle() 方法刪除，它很實用，若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。
動畫

2、滑動效果(與show，hide類似，不一樣點是動畫效果不一樣如下幾點都是 )

1.slideDown() 經過高度變化（向下增大）來動態地顯示全部匹配的元素，在顯示完成後可選地觸發一個回調函數。

2.slideUp（）經過高度變化（向上減少）來動態地隱藏全部匹配的元素，在隱藏完成後可選地觸發一個回調函數。

3.slideToggle() 經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。

3、淡入淡出效果（淡入淡出是改變元素的透明度實現隱藏顯現不會修改寬高，這是和上面的兩種效果的區別）

1.fadeIn() 經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數。

2.fadeOut() 經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。

3.fadeTo() 把全部匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回調函數

eg：$("img:eq(2)").fadeTo(3000,0.3); // fadeTo()方法將圖片以3000毫秒的時間過渡到0,3的透明度

4.fadeToggle() 經過不透明度的變化來開關全部匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回調函數。

4、自定義效果（自定義效果至關於集以上效果於一身，能夠改變元素的寬高，透明度等屬性.....）

1.animate() animate() 方法執行 CSS 屬性集的自定義動畫。該方法經過CSS樣式將元素從一個狀態改變爲另外一個狀態。

CSS屬性值是逐漸改變的，這樣就能夠建立動畫效果。只有數字值可建立動畫（好比 "margin:30px"）。

字符串值沒法建立動畫（好比 "background-color:red"）。

語法以下：

$("button:eq(10)").click(function(){ //animate()方法
                    $("img:eq(3)").animate({     //讓圖片經歷3秒寬度變成200px 高度變成200px 透明度變成0.5
                        width:"300px",
                        height:"200px",
                        opacity:"0.5",
                    },3000);
               });

2.stop() 中止全部在指定元素上正在運行的動畫。若是隊列中有等待執行的動畫(而且clearQueue沒有設爲true)，他們將被立刻執行

方法屬性： stop([clearQueue],[jumpToEnd])

clearQueue:若是設置成true，則清空隊列。能夠當即結束動畫。

jumpToEnd:若是設置成true，則完成隊列。能夠當即完成動畫。

3.delay() 設置一個延時來推遲執行隊列中以後的項目。jQuery 1.4新增。用於將隊列中的函數延時執行。他既能夠推遲動畫隊列的執行，也能夠用於自定義隊列。

4.finish() 中止當前正在運行的動畫，刪除全部排隊的動畫，並完成匹配元素全部的動畫。 finish()和stop有着類似之處，不一樣點在於，stop是中止，stop(true,true)

是結束當前的動畫，finish不一樣他將會清除該元素上全部的動畫，直接到動畫完成的最終效果。

6、設置效果

效果的使用關鍵是如何搭配使用，在何時使用，能夠嵌套，能夠循環等等。簡單的案列執行起來很簡單。emmmmmmm最後兩張截圖原諒我不知道怎麼寫案列QAQ

我這裏根據以上的效果方法寫了簡單案例以下：

<html>
    <head>
        <meta charset="utf-8" />
        <title>動畫效果</title>
        <script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
          *{
              padding: 0;
              margin: 0;
          }
          img{width: 100px; height: 100px;opacity: ;}
    </style>
    <body>
        <h3>基本效果</h3>
        <img src="./img/1.jpg" >
        <button type="button">hide</button>
        <button type="button">show</button>
        <button type="button">Toggle</button>
        <br>
        <h3>滑動效果</h3>
        <img src="./img/2.jpg" >
        <button type="button">slideDown</button>
        <button type="button">slideUp</button>
        <button type="button">slideToggle</button>
        <br>
        <h3>淡入淡出效果</h3>
        <img src="./img/3.jpg" >
        <button type="button">fadeIn</button>
        <button type="button">fadeOut</button>
        <button type="button">fadeTo</button>
        <button type="button">fadeToggle</button>
        <br>
        <h3>自定義效果</h3>
        <img src="./img/4.jpg" >
        <button type="button">animate</button>
        <button type="button">stop</button>
        <button type="button">delay</button>
        <button type="button">finish</button>
        
        <script type="text/javascript">
             $(function(){
                 //基本效果
                $("button:eq(0)").click(function(){
                    $("img:eq(0)").hide("slow")        // hide()方法
                });
                $("button:eq(1)").click(function(){
                    $("img:eq(0)").show("slow")        // show()方法
                });
                $("button:eq(2)").click(function(){
                    $("img:eq(0)").toggle("slow")        // show()方法
                });
                 //滑動效果
                $("button:eq(3)").click(function(){
                    $("img:eq(1)").slideDown("slow");   //slideDown()方法
                });
                $("button:eq(4)").click(function(){ 
                    $("img:eq(1)").slideUp("slow");      //slideUp()方法
                });
                $("button:eq(5)").click(function(){
                    $("img:eq(1)").slideToggle("slow");   //slideToggle()方法
                });
                // 淡入淡出效果
                $("button:eq(6)").click(function(){
                    $("img:eq(2)").fadeIn(3000);             // fadeIn()方法
                });
                $("button:eq(7)").click(function(){
                    $("img:eq(2)").fadeOut(3000);            // fadeOut()方法
                });
                $("button:eq(8)").click(function(){
                    $("img:eq(2)").fadeTo(3000,0.3);         // fadeTo()方法
                });
                $("button:eq(9)").click(function(){
                    $("img:eq(2)").fadeToggle(3000);          // fadeToggle()方法
                });
                //自定義效果
                $("button:eq(10)").click(function(){ //animate()方法
                    $("img:eq(3)").animate({     //讓圖片經歷3秒 透明度變成0.1
                        opacity:"0.1",
                    },3000,function(){
                        $("img:eq(3)").animate({     //讓圖片經歷3秒透明度變成1
                            opacity:"1",
                        },3000);
                    });
                });
                
                $("button:eq(11)").click(function(){
                    $("img:eq(3)").stop(true,true);         //stop()方法，中止改元素上的動畫   stop參數可爲true,true如stop(true,true)
                });
                
                $("button:eq(12)").click(function(){ 
                    $("img:eq(3)").slideUp(3000).delay(2000).fadeIn(3000)  //delay()方法 在執行完slideUp()方法後等待2秒在執行fadeIn()方法
                });
                
                $("button:eq(13)").click(function(){
                    $("img:eq(3)").finish()  //finish()方法清除該元素的全部排隊的動畫
                });
             });
        </script>
    </body>
</html>

效果：

我的學習，內容拙劣，

相關標籤/搜索

每日一句

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