jquery回弹_jQuery UI API反弹特效(Bounce Effect)

jQuery UI API反弹特效(Bounce Effect)

用法

描述：反弹特效(Bounce Effect)反弹一个元素。当与隐藏或显示一起使用时，最后一次或第一次反弹会呈现淡入/淡出效果。

bounce

参数 类型 描述 默认值

distance Number 最大的反弹距离，以像素为单位。 20

times Integer 元素反弹的次数。当隐藏或显示时，会为淡入/淡出效果添加半个反弹。 5

实例

使用反弹特效(Bounce Effect)切换一个 div。

反弹特效(Bounce Effect)演示

#toggle {

width: 100px;

height: 100px;

background: #ccc;

}

点击任意地方进行切换。

$( document ).click(function() {

$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );

});

亲自测试一下

序号

相关信息

1

.addClass()

当动画样式改变时，为匹配的元素集合内的每个元素添加指定的 Class

2

百叶窗特效(Blind Effect)

百叶窗特效(Blind Effect)通过将元素包裹在一个容器内，采用

3

剪辑特效(Clip Effect)

剪辑特效(Clip Effect)通过垂直或水平方向夹剪元素来隐藏或显示一个元素

4

颜色动画(Color Animation)

使用 .animate() 实现颜色动画效果

5

降落特效(Drop Effect)

降落特效(Drop Effect)通过单个方向滑动的淡入淡出来隐藏或显示一个元素

6

Easings

Easing 函数指定动画在不同点上的行进速度

7

.effect()

对一个元素应用动画特效

8

爆炸特效(Explode Effect)

爆炸特效(Explode Effect)通过把元素裂成碎片来隐藏或显示一个元素。

9

淡入淡出特效(Fade Effect)

淡入淡出特效(Fade Effect)通过淡入淡出元素来隐藏或显示一个元素

10

折叠特效(Fold Effect)

折叠特效(Fold Effect)通过折叠元素来隐藏或显示一个元素

11

.hide()

使用自定义效果来隐藏匹配的元素

12

突出特效(Highlight Effect)

突出特效(Highlight Effect)通过首先改变背景颜色来隐藏或显示一个元素

13

膨胀特效(Puff Effect)

通过在缩放元素的同时隐藏元素来创建膨胀特效(Puff Effect)

14

跳动特效(Pulsate Effect)

跳动特效(Pulsate Effect)通过跳动来隐藏或显示一个元素

15

.removeClass()

当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class

18

.show()

使用自定义效果来显示匹配的元素

21

.switchClass()

当动画样式改变时，为匹配的元素集合内的每个元素添加和移除指定的 Class

22

.toggle()

使用自定义效果来显示或隐藏匹配的元素

23

.toggleClass()

当动画样式改变时，根据 Class 是否存在以及 switch 参数的值，为匹配的元素集合内的每个元素添加或移除一个或多个 Class

本文网址：http://www.santii.com/jqueryui/ref-effects_bounce-effect.html