jquery中动画特效方法
基本特效
方法： 说明
.show() 显示选中的元素
.hide() 隐藏选中的元素
.toggle() 在选中的元素上切换显示和隐藏的状态
淡入淡出效果
方法： 说明
.fadeIn() 淡入选中元素使其变得不透明
.fadeOut() 淡出选中元素使其变得透明
.dadeTo() 修改选中元素的透明度
.fadeToggle() 使用透明度来隐藏或显示选中元素（切换其当前状态，若当前显示状态，则切换至隐藏状态）
滑动特效
方法： 说明
.slideUp() 使用滑动特效来显示选中元素
.slideDown() 使用滑动特效来隐藏选中元素
.slideToggle() 使用滑动特效来切换选中元素（切换其当前状态，若当前显示状态，则切换至隐藏状态）
自定义特效
方法： 说明
.delay() 延迟队列中操作的执行
.stop() 如果一个动画正在运行，就停止它
.animate() 创建自定义动画
下面是举例（下面例子要引入jquery的js文件才能看到效果，下面只提供引入代码，文件可以到官网下载：http://jquery.com）
例一：
html:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>jQuery</title>
5 <!-- <link rel="stylesheet" href="css/mystyle.css" /> -->
6 <style>
7 body{
8 background-color: #cccac8;
9 }
10 ul{
11 list-style-type: none;
12 }
13 li{
14 background-color: #fb7b0a;
15 border: 1px solid #acacac;
16 }
17 </style>
18 </head>
19 <body>
20 <div >
21 <h1 >List</h1>
22 <h2>Buy groceries</h2>
23 <ul>
24 <li class="hot"><em>fresh</em> figs</li>
25 <li class="hot">pine nuts</li>
26 <li class="hot">honey</li>
27 <li >balsamic vinegar</li>
28 </ul>
29 </div>
30 <script src="js/jquery-2.2.3.js"></script>
31 <script src="js/js7.js"></script>
32 </body>
33 </html>js7.js:
1 $(function() {
2
3 $('h2').hide().slideDown();
4 var $li = $('li');
5 $li.hide().each(function(index) {
6 $(this).delay(700 * index).fadeIn(700);
7 });
8
9 $li.on('click', function() {
10 $(this).fadeOut(700);
11 });
12
13 });例二：
html:和上面一样，把引用的js7.js替换成js8.js即可。
js8.js:
$(function() {
$('li').on('click', function() {
$(this).animate({
opacity: 0.0,
paddingLeft: '+=80'
}, 500, function() {
$(this).remove();
});
});
});- 上一篇 »JavaScript
- 下一篇 »css3动画特效插件——animate.min.css