本文概述

• jQuery Shake效果示例1
• jQuery跳动效果示例2
• jQuery爆炸效果示例3
• jQuery Blind Effect示例4
• jQuery Clip Effect示例5
• jQuery Drop Effect示例6
• jQuery Fade效果示例7
• jQuery折叠效果示例8
• jQuery Highlight效果示例9
• jQuery吹效果示例10
• jQuery Scale效果示例11
• jQuery Pulsate Effect示例12
• jQuery Size Effect示例13
• jQuery Slide Effect示例14

effect()方法用于将动画效果应用于元素, 而不必显示或隐藏它。这是用于管理jQuery UI视觉效果的方法之一。
句法：

.effect( effect [, options ] [, duration ] [, complete ] )

effect()方法的参数：

• 效果：此参数指定用于过渡的效果。
• 选项：用于指定效果的特定设置和缓动。每个效果都有其自己的一组选项。
• 持续时间：这指定持续时间并指示效果的毫秒数。其默认值为400。
• 完成：这是一种回调方法。当元素的效果完成时, 将为每个元素调用该函数。

最常用的jQuery UI效果：
添加表格：

影响	描述
Blind	以百叶窗的方式显示或隐藏元素：根据指定的方向和模式, 通过上下移动底部边缘, 或将右侧边缘向右或向左移动。
Bounce	使元素看起来在垂直或水平方向上反弹, 有选择地显示或隐藏元素。
Clip	通过将元素的相对边界移动到一起, 直到它们在中间相遇, 反之亦然, 从而显示或隐藏元素。
Explode	通过将元素拆分为多个部分来显示或隐藏, 这些部分沿径向方向移动, 就像嵌入页面或从页面爆炸一样。
Drop	通过使其看起来像放在页面上或从页面上掉下来, 显示或隐藏该元素。
Fade	通过调整元素的不透明度来显示或隐藏元素。这与核心淡入淡出效果相同, 但没有选项。
Fold	通过向内或向外调整相反的边界, 然后对另一组边界进行相同操作, 来显示或隐藏元素。
Highlight	通过在显示或隐藏元素时暂时更改其背景颜色来引起对元素的注意。
Puff	调整元素的不透明度时, 在适当位置扩展或收缩元素。
Shake	垂直或水平前后摇动元素。
Scale	按指定的百分比扩展或收缩元素。
Pulsate	在确保按指定方式显示或隐藏元素之前, 先打开或关闭元素的不透明度。
Size	将元素调整为指定的宽度和高度。与比例类似, 只是指定目标尺寸的方式不同。
Slide	移动元素, 使其看起来可以滑入或滑出页面。
Transfer	对瞬态轮廓元素进行动画处理, 使该元素看起来似乎可以转移到另一个元素。必须通过ui-effects-transfer类或指定为选项的类的css规则定义outline元素的外观。

jQuery Shake效果示例11.震动效果：
让我们以一个示例来指定抖动效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-1 { height: 50px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-1').click(function() { $( "#box-1" ).effect( "shake", { times: 10, distance: 150 }, 3000, function() { $( this ).css( "background", "#ff4040" ); }); }); }); < /script> < /head> < body> < div id="box-1"> Click here to< br/> < b> Shake Me!< /b> < /div> < /body> < /html>

立即测试
jQuery跳动效果示例22.弹跳效果：
让我们以一个示例来指定反弹效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-1 { height: 50px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-1').click(function() { $( "#box-1" ).effect( "bounce", { times: 10, distance: 150 }, 3000, function() { $( this ).css( "background", "#ff4040" ); }); }); }); < /script> < /head> < body> < div id="box-1"> Click here to< br/> < b> Bounce Me!< /b> < /div> < /body> < /html>

立即测试
jQuery爆炸效果示例33.爆炸效果：
让我们以一个示例来指定爆炸效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "explode", easing: "easeInExpo", pieces: 16, duration: 2000 }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Explode Me!< /b> < /div> < /body> < /html>

立即测试
jQuery Blind Effect示例44.盲效应：
让我们以一个例子来指定盲目的效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "blind", duration:0 }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Blind Me!< /b> < /div> < /body> < /html>

立即测试
jQuery Clip Effect示例55.剪辑效果：
让我们以一个示例来指定剪辑效果：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "clip", duration: 2000 }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Clip Me!< /b> < /div> < /body> < /html>

立即测试
jQuery Drop Effect示例66.掉落效果：
让我们以一个示例来指定放置效果：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "drop", }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Drop Me!< /b> < /div> < /body> < /html>

立即测试
jQuery Fade效果示例77.淡入淡出效果：
让我们以一个示例来指定淡入淡出效果：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "fade", }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Fade Me!< /b> < /div> < /body> < /html>

立即测试
jQuery折叠效果示例88.折叠效果：
让我们以一个示例来指定折叠效果：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 500px; width: 500px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "fold", duration: 5000 }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Fold Me!< /b> < /div> < /body> < /html>

立即测试
jQuery Highlight效果示例99.突出显示效果：
让我们以一个示例来指定突出显示效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "highlight", duration:2000 }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Highlight Me!< /b> < /div> < /body> < /html>

立即测试
jQuery吹效果示例1010.泡芙效果：
让我们以一个示例来指定粉扑效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "puff", duration:5000 }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Puff Me!< /b> < /div> < /body> < /html>

立即测试
jQuery Scale效果示例1111.缩放效果：
让我们以一个示例来指定缩放效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> scale demo< /title> < link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> < style> #toggle { width: 100px; height: 100px; background: #7fffd4; } < /style> < script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js"> < /script> < script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js"> < /script> < /head> < body> < p> Click anywhere to toggle the box.< /p> < div id="toggle"> < /div> < script> $( document ).click(function() { $( "#toggle" ).toggle( "scale" ); }); < /script> < /body> < /html>

立即测试
jQuery Pulsate Effect示例1212.脉动效应：
让我们以一个示例来指定脉动效果。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 100px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "pulsate", duration:5000 }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Pulsate Me!< /b> < /div> < /body> < /html>

立即测试
jQuery Size Effect示例1313.尺寸效果：
让我们举个例子来调整盒子的大小。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> scale demo< /title> < link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> < style> #toggle { width: 100px; height: 100px; background: #7fffd4; } < /style> < script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js"> < /script> < script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js"> < /script> < /head> < body> < p> Click anywhere to toggle the size of the box.< /p> < div id="toggle"> < /div> < script> $( document ).click(function() { $( "#toggle" ).toggle( "size" ); }); < /script> < /body> < /html>

立即测试
jQuery Slide Effect示例1414.幻灯片效果：
让我们以一个示例来指定幻灯片效果：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI effect Example< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/004923FI-0.jpg"> < /script> < script src="http://img.readke.com/220430/0049232Y3-1.jpg"> < /script> < !-- CSS --> < style> #box-2 { height: 100px; width: 200px; background: #7fffd4; } < /style> < script> $(document).ready(function() { $('#box-2').click(function() { $( "#box-2" ).effect({ effect: "slide", duration:1000 }); }); }); < /script> < /head> < body> < div id="box-2"> Click here to< br/> < b> Slide Me!< /b> < /div> < /body> < /html>

【jQuery UI效果】立即测试

推荐阅读

• 

  如果发生合同纠纷如何判刑，合同纠纷怎么判刑
• 

  西梅和芒果能一起吃吗
• 

  培训班达内免费，达内java免费训练营是怎么回事真的免费吗
• 

  usb 分析仪
• 

  蜂巢素 蜂巢素的作用与功效禁忌
• 

  编程语言最新排名榜，现在的编程语言排行榜
• 

  《红楼梦》中鸳鸯最后嫁给了谁了
• 

  为什么乐乐可以坐副驾驶，我只能坐安全座椅
• 

  为什么吃了抗生素不能喝酒
• 

  oppo|轻松记录生活之美，OPPO Reno7手机南滨路随拍
• 

  中小企业发展环境排名公布表 中小企业发展环境排名公布
• 

  投稿|奥运会困于神坛
• 

  出汗多怎么办 比一般人要多喝水
• 

  突然不想谈了,想分手 怎么委婉的说分手
• 

  STAR分析转录组的步骤
• 

  肾衰竭有哪些症状？ 肾功能衰竭的症状
• 

  编辑记者从业资格证怎么考 编辑记者从业资格证考试
• 

  客户购买分析,客户的购买心理分析
• 

  为什么公交车“可以”超载了！ 公交车超载
• 

  无主之地39月29日更新了什么 无主之地39月29日更新内容一览

• jQuery UI功能
• jQuery UI缓和
• jQuery UI Droppable
• jQuery UI可拖动
• jQuery UI对话框
• jQuery UI日期选择器
• jQuery UI按钮
• jQuery UI自动完成
• jQuery UI颜色动画