Jquery動畫函數操做實例大全

時間 2020-02-11

原文原文鏈接

經過一段代碼來展現jQuery的動畫效果。
1.show&hidejavascript

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().hide();
    },function(){
         $(this).next().show();
    })
})
</script>

html代碼部分：php

<body>
<div id="panel">
    <h5 class="head">什麼是jQuery?</h5>
    <div class="content">
        jQuery是繼Prototype以後又一個優秀的JavaScript庫，它是一個由 John Resig 建立於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。
    </div>
</div>
</body>

toggle()
用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。
2.show&hide帶時間，能夠加入一個時間參數css

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().hide(600);
    },function(){
         $(this).next().show(600);
    })
})
</script>

3.fadeOut&fadeIn 注意大小寫，javascript是區分大小寫的。
fadeOut()經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。
fadeIn()經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數。html

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().fadeOut();
    },function(){
         $(this).next().fadeIn();
    })
})
</script>

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

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().slideUp();
    },function(){
         $(this).next().slideDown();
    })
})
</script>

5.animate簡單應用程序員

<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
       //css中div必須設置爲position:relative。纔有效果。
       $(this).animate({left: "500px"}, 3000);
    })
})
</script>

點擊panel，會向右移動500px，時間爲3秒鐘。這實際上是動態的調整它的位置。這要結合css來實現。由於只有position設爲了relative，left屬性纔會有效。
6.animate多重動畫ide

<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
        $(this).animate({left: "500px",height:"200px"}, 3000);
    })
})
</script>

這段代碼的意思，是使panel向右移動的同時，高度變爲200px。這裏用了兩個參數。函數

<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
         $(this).animate({left: "500px"}, 3000)
                .animate({height: "200px"}, 3000);
    })
})
</script>

這段代碼與上面有所不一樣，它不是同時變化的，它是由前後順序的，先是panel向右移動500px，而後高度變爲200px。動畫

<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//設置透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                     .animate({top: "200px" , width :"200px"}, 3000 )
                     .fadeOut("slow");
        });
    });
</script>

這段代碼更爲複雜一點。先是經過css方法設置panel的透明度爲0.5，也就是半透明。而後是先讓panel向右移動400px，高度變爲200px，透明度變爲1，也就是不透明。而後再向下移動200px，寬度變爲200px，最後慢慢的淡出。fadeOut("slow")就是淡出的意思。這裏的參數能夠是數字表時間，也能夠是字符串‘slow’，‘fast’錶快慢。this

<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//設置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                     .animate({top: "200px" , width :"200px"}, 3000 )
                     .css("border","5px solid blue");
        });
    });
</script>

這段代碼最後有一段css效果。它並非最後執行的。也就是它並無排隊，從一開始就是border爲5px solid blue的效果。能夠調整代碼以下：

<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//設置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                     .animate({top: "200px" , width :"200px"}, 3000 ,function(){
                         $(this).css("border","5px solid blue");
                     })
                     
        });
    });
</script>

animate(params,[speed],[easing],[fn])。animate最後一個參數是一個函數，它表示等動畫執行完畢執行的動做。在這個函數中，設置css就能夠實現css的最後執行。
7.stop
stop() 方法中止當前正在運行的動畫。

<script type="text/javascript">
$(function(){
      $("#panel").hover(function() {
          $(this).animate({height : "150",width : "300"} , 200 );
      },function() {
          $(this).animate({height : "22",width : "60" } , 300 );
      });
});
</script>

這段代碼表示當鼠標浮於panel之上時，會讓高度和寬度變大。當鼠標離開後，高度寬度變小。若是鼠標快速的移動移出就會有一個問題。就是它會一遍一遍的執行動做，直到動做完成。有必定的滯後效應。如何避免這一滯後效應呢？
咱們能夠經過stop() 方法。代碼以下：

<script type="text/javascript">
$(function(){
      $("#panel").hover(function() {
          $(this).stop().animate({height : "150",width : "300"} , 200 );
      },function() {
          $(this).stop().animate({height : "22",width : "60" } , 300 );
      });
});
</script>

也就是在執行動做以前，先結束上一個動做，這樣就能避免快速移動移出後的滯後效果。
stop([clearQueue],[jumpToEnd]) clearQueue:若是設置成true，則清空隊列。能夠當即結束動畫。 jumpToEnd:若是設置成true，則完成隊列。能夠當即完成動畫。
8.還有一些連在一塊兒的動做。

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().toggle();
    })
})
</script>

toggle()切換消失與出現

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().slideToggle();
    })
})
</script>

slideToggle()切換上下簾效果

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().fadeTo(600, 0.2);
    })
})
</script>

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

<script type="text/javascript">
$(function(){
      $("button:eq(0)").click(function () {
          $("div.content").hide().animate({ opacity : "1" }  );//隱藏元素並取消透明度
      });
      
      $("button:eq(1)").click(function () {
          $("div.content").animate({height : "show" , width : "show" , opacity : "show" } , 600 );//用animate仿show(),原理就是高、寬、透明度都顯示
      });

      $("button:eq(2)").click(function () {
        $("div.content").animate({height : "show" } , 600 );//用animate仿slideDown()
      });

      $("button:eq(3)").click(function () {
          $("div.content").animate({ opacity : "show" } , 600 );//用animate仿fadeIn()
      });

      $("button:eq(4)").click(function () {
            $("div.content").animate({ opacity : "0.2" } , 600 );//用animate仿fadeTo()
      });
})
</script>

轉載於猿2048:➱《Jquery動畫函數操做實例大全》