本文概述

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

推荐阅读

• 

  荔枝旺长不开花解决方法 荔枝旺长不开花解决方法
• 

  cluster计算机集群-cookie-session-
• 

  冰冻水饺用热水煮还是冷水煮 水饺煮多久
• 

  电视要怎么样才能插入u盘，在电视上怎么插u盘
• 

  赛博朋克2077提升人物负重的方法
• 

  沃邮箱安卓版,中国联通wo邮箱怎么办?
• 

  螳螂外形特征简写
• 

  PS制作霞光下的美人鱼
• 

  用暖宝宝对身体有没有危害
• 

  苹果手机能用两个微信吗 苹果手机不能用微信了
• 

  全真发假发的价格 头发抛光多少钱
• 

  飞机模拟驾驶游戏哪个好,电脑好玩的飞行模拟器游戏排行
• 

  怎么查看一年的微信记录 如何查找一年每股市价，微信聊天记录只有一年
• 

  菲斯曼锅炉f02代码怎么解决？
• 

  地理位置的分析
• 

  广州电脑维修
• 

  户型+面积 2023珠海高新区公租房港湾1号公馆房源信息
• 

  喀斯特地貌特点 喀斯特地貌简介
• 

  种植金丝皇菊的收入怎样 种植金丝皇菊的收入好不好
• 

  面料缩水怎么处理 面料缩水的处理方法

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