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 id="page">
21 <h1 id="header">List</h1>
22 <h2>Buy groceries</h2>
23 <ul>
24 <li id="one" class="hot"><em>fresh</em> figs</li>
25 <li id="two" class="hot">pine nuts</li>
26 <li id="three" class="hot">honey</li>
27 <li id="four">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();
});
});
});