本文概述

• 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效果】立即测试

推荐阅读

• 

  不小心点了诈骗短信的链接怎么办
• 

  h501,徕芬se和米家h501
• 

  秸杆如何氨化处理 秸杆如何氨化
• 

  mysql如何修改表 mysql改完之后怎么保存到表
• 

  梦见板凳是什么意思 梦见板凳好不好
• 

  通用 电路图分析图,高中电路图分析
• 

  冥想第二周回顾
• 

  左右脚底疼痛，着不了地
• 

  淀粉吃多了有什么危害
• 

  博世壁挂炉烧水不热的原因有 博世壁挂炉生活水正常但地暖不烧
• 

  哈喇子是哪里的方言 哈喇子是哪里的方言什么意思
• 

  芝麻购能开通吗 芝麻购开通怎么关闭
• 

  淡妆浓抹总相宜上一句是什么 淡妆浓抹总相宜
• 

  邯郸市失业保险可以跨省办理吗
• 

  淮北交通违章查询电话 淮北交通违章查询
• 

  花生和核桃可以一起吃吗 每天吃花生核桃的好处
• 

  i5|AWO小艾-乐14笔记本测评：职场年轻人必选的轻薄本
• 

  王者荣耀新手排位最能上分的英雄是谁？
• 

  魔琴2013 刘谦李云迪
• 

  福建面积多少平方公里

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