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" );
});

 

转载于:https://www.cnblogs.com/chaoquan/p/7778814.html