JQuery UI 特效

使用的特效的函数：

隐藏元素 hide();

显示元素 show();

隐藏/显示元素 toggle();

元素使用特效 effect();

改变样式

toggleClass();

removeClass();

addClass();

 

语法

写法一： .toggle( effect [, options ] [, duration ] [, complete ] )

写法二： .toggle( options )

 

参数：effect [String]

blind(百叶窗),bounce(弹跳),drop(拖动)，slide(滑动)

explode(爆炸特效),fade(淡入淡出),fold(折叠),highlight(高亮),

puff(膨胀),scale(缩放)，pulsate(闪动),shake(震动)

同样的，

options [object]

这个object里面使用key:value键值对方式

{effect：“”，easing：“” duration：time, complete:callback ，queue:true/false }

 

 easing缓动效果，跟随变化曲线二变化的特效

 

下面举个例子。。

========================================

 (粗体表示该效果独有的属性,带/的表示可能的取值，第一个为默认值)

百叶窗特效：blind 

写法1：$( "#toggle" ).toggle( "blind" ,2000);

写法2：$( "#toggle" ).toggle({effect:"blind",duration:2000,direction:"up/down/left/right/vertical/horizontal"});

 

反弹特效:bounce

写法1：$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );  类似这个特有的属性就作为一个options来作为参数

写法2：$( "#toggle" ).toggle( {effect:"bounce",distance:50, times: 10 }, "2500" );

写法3：$( "#toggle" ).toggle( {effect:"bounce",distance:50, times: 10 ，duration：2500} );

 

剪辑特效：clip

$( "#toggle" ).toggle( "clip" );

$( "#toggle" ).toggle( {effect:"clip",direction:"vertical/horizontal" );

 

。。。。。。其他的就不列举啦

转载于:https://www.cnblogs.com/act262/p/4060980.html