jQuery UI effect
jQuery UI effect
effect()方法用于将动画效果应用于元素，而不必显示或隐藏它。这是用于管理jQuery UI视觉效果的方法之一。
语法:
.effect( effect [, options ] [, duration ] [, complete ] )
effect()方法的参数:
effect: 此参数指定用于过渡的效果。
options: 用于指定效果的特定设置和缓动效果。每个效果都有自己的一组选项。
duration: : 指定持续时间，并指示效果的毫秒数。其默认值为400。
complete: 这是一种回调方法。当元素的效果完成时，将为每个元素调用该函数。
最常用的jQuery UI效果:
添加表格:
| 效果 | 说明 |
| Blind | 以百叶窗的方式显示或隐藏元素: 根据指定的方向和模式，通过上下移动底部边缘，或将右侧边缘向右或向左移动。 |
| Bounce | 使元素看起来在垂直或水平方向上反弹，可以选择显示或隐藏该元素。 |
| Clip | 通过将元素的相对边界一起移动直到它们在中间相遇(反之亦然)来显示或隐藏元素。 |
| Explode | 通过将元素拆分为多个部分来显示或隐藏，这些部分沿径向方向移动，就像嵌入页面或从页面爆炸一样。 |
| Drop | 通过使元素看起来像放在页面上或从页面上掉下来来显示或隐藏该元素。 |
| Fade | 通过调整元素的不透明度来显示或隐藏元素。这与核心淡入淡出效果相同，但没有选项。 |
| Fold | 显示元素的方法是显示或隐藏元素，方法是将相对的边界向内或向外调整，然后对另一组边界进行相同的操作。 |
| Highlight | 在显示或隐藏元素时通过暂时更改其背景颜色来引起人们的注意。 |
| Puff | 在调整元素的不透明度的同时扩展或收缩元素。 |
| Shake | 在垂直或水平方向上前后摇动元素。 |
| Scale | 以指定的百分比扩展或收缩元素。 |
| Pulsate | 在确保按指定方式显示或隐藏元素之前，先打开或关闭元素的不透明度。 |
| Size | 将元素调整为指定的宽度和高度。除了指定目标尺寸的方式外，其他与比例类似。 |
| Slide | 移动元素，使其看起来可以滑入或滑出页面。 |
| Transfer | 对瞬态轮廓元素进行动画处理，使该元素看起来似乎可以转移到另一个元素。必须通过ui-effects-transfer类或指定为选项的类的css规则定义outline元素的外观。 |
jQuery Shake效果示例1
1、Shake效果:
让我们以指定震动效果为例。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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跳动效果示例2
2、Bounce效果:
让我们以一个示例来指定弹跳效果。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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爆炸效果示例3
3、Explode效果:
让我们以一个示例来指定爆炸效果。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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盲目效果示例4
4、Blind效果:
让我们以一个示例来指定盲效果。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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示例5
5。Clip效果:
让我们以一个示例来指定剪辑效果:
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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示例6
6、Drop效果:
让我们以一个示例来指定放下效果:
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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淡入淡出效果示例7
7、Fade效果:
让我们以一个示例来指定淡入淡出效果:
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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折叠效果示例8
8、Fold效果:
让我们以指定折叠效果为例:
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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效果示例9
9、Highlight效果:
让我们以一个示例来指定高光效果。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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 Puff Effect示例10
10、Puff效果:
让我们以指定泡泡效果为例。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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缩放效果示例11
11、Scale效果:
让我们以指定缩放效果为例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scale demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #7fffd4;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//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脉动效果示例12
12、Pulsate效果:
让我们以指定脉动效果为例。
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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大小效果示例13
13、Size效果:
让我们举个例子来调整盒子的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scale demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #7fffd4;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//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示例14
14、Slide效果:
让我们以一个示例来指定幻灯片效果:
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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>