jQuery UI效果函數演示

最近在看jQuery UI的庫，之前沒怎麼系統學過jQuery UI庫函數的效果，JS說究竟是一門函數式編程語言，靠一點點的搭建來完成整個框架，現將效果函數的用法列表以下，具體的實現能夠去看庫函數。

 

.addClass()

當動畫樣式改變時，爲匹配的元素集合內的每一個元素添加指定的Class。

$("div").click(function(){
    $(this).addClass("big-blue",1000,"easeOutBounce");
});

Blind Effect

百葉窗特效經過將元素包裹在一個容器內，採用「拉百葉窗」效果來隱藏或顯示元素

$(document).click(function(){
   $("#toggle").toggle("blind");
});

Bounce Effect

反彈特效，反彈一個元素。當與隱藏或顯示一塊兒使用時，最後一次或第一次反彈會呈現淡入/淡出的效果

$(document).click(function(){
    $("#toggle").toggle("bounce",{time:3},"slow");
   })

Clip Effect

剪輯效果經過垂直或水平剪輯一個元素來顯示或隱藏它，而且它是從元素的兩端同時進行的。

 $(document).click(function(){
    $("#toggle").toggle("clip");
   })

Color Animation

顏色動畫使用.animate()

$("#toggle").click(function(){
   $("#elem").animate({
       color:"green",
       backgroundColor:"rgb(20,20,20)"
   });
});

Drop Effect

拉拽特效隱藏或顯示一個元素，並使用經過淡入或淡出效果使它向一個方向滑動。

$(document).click(function(){
   $("#toggle").toggle("drop");
});

easings

動畫緩衝函數能夠肯定在動畫過程當中不一樣時刻的動畫速度。

Explode Effect

爆炸特效經過將元素分拆成若干片來隱藏或顯示一個元素

  $(document).click(function(){
    $("#toggle").toggle("explode");
   })

Fade Effect

淡入淡出的隱藏式或顯示一個元素

$( document ).click(function() {
  $( "#toggle" ).toggle( "fade" );
});

Fold Effect

經過摺疊形式來隱藏或顯示一個元素

$( document ).click(function() {
  $( "#toggle" ).toggle( "fold" );
});