1 /**
2 * 【JQ基础动画】
3 * show() 显示
4 * hide() 隐藏
5 * toggle() 切换
6 * 默认无动画，如果要产生动画
7 * 在括号内，添加毫秒数，可产生动画和控制动画的快慢
8 *
9 * 《滑动动画》
10 * slideDown() 滑动显示(下)
11 * slideUp() 滑动隐藏(上)
12 * slideToggle 滑动切换
13 * 默认有动画，默认是400毫秒
14 * 《淡入淡出动画》
15 * fadeIn() 淡入显示
16 * fadeOut() 淡出显示
17 * fadeToggle() 切淡
18 * fadeTo(时间,透明度) 设置透明度
19 */
一.基础动画
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="lib/jquery-1.12.2.js"></script>
7 <script>
8 $(function () {
9 $('button:eq(0)').click(function () {
10 $('img').show(1000);
11 });
12
13 $('button:eq(1)').click(function () {
14 $('img').hide(1000);
15 });
16
17 $('button:eq(2)').click(function () {
18 $('img').toggle(1000);
19 });
20 });
21 </script>
22 </head>
23 <body>
24 <button>显示</button>
25 <button>隐藏</button>
26 <button>切换</button><br/>
27 <img src="images/1.gif" alt="">
28 </body>
29 </html>
二.滑动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
200px;
height: 400px;
background-color: pink;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
$('button').eq(0).click(function () {
$('.box').slideDown();
});
$('button').eq(1).click(function () {
$('.box').slideUp();
});
$('button').eq(2).click(function () {
$('.box').slideToggle();
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<br>
<!--<img src="images/1.gif" alt="" width="150" height="440">-->
<div class="box"></div>
</body>
</html>
三.淡入淡出动画
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .box{
8 200px;
9 height: 400px;
10 background-color: pink;
11 }
12 </style>
13 <script src="lib/jquery-1.12.2.js"></script>
14 <script>
15 $(function () {
16 $('button').eq(0).click(function () {
17 $('.box').fadeIn();
18 });
19 $('button').eq(1).click(function () {
20 $('.box').fadeOut();
21 });
22 $('button').eq(2).click(function () {
23 $('.box').fadeToggle(1000);
24 });
25 $('button').eq(3).click(function () {
26 $('.box').fadeTo(400,0.3);
27 });
28 });
29 </script>
30 </head>
31 <body>
32 <button>显示</button>
33 <button>隐藏</button>
34 <button>切换</button>
35 <button>透明度</button>
36 <br>
37 <!--<img src="images/1.gif" alt="" width="150" height="440">-->
38 <div class="box"></div>
39 </body>
40 </html>
四.自定义动画
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .main{
8 100px;
9 height: 100px;
10 background-color: pink;
11 /*transition: all .4s;*/
12 }
13 </style>
14 <script src="lib/jquery-1.12.2.js"></script>
15 <script>
16 $(function () {
17 /**
18 * 自定义动画(兼容IE678.)
19 * 其实JQ的动画也可以通过CSS3实现，但是CSS3会有兼容问题
20 * 移动端项目的时候，直接使用CSS3实现效果即可
21 * PC端要考虑低版本浏览器兼容，可以使用JQ的animate函数
22 *
23 * 有动画的属性：
24 * 值是数字的属性：（颜色，文本居中这些就实现不了）
25 * 核心函数
26 * .animate({属性集合})
27 *
28 * */
29
30
31
32 //（颜色，文本居中这些就实现不了动画）
33 $('button').click(function () {
34 $('.main').animate({
35 "width":"300px",
36 "height":"300px",
37 "backgroundColor":"#f90",
38 "textAlign":"center",
39 "lineHeight":"300px"
40 },300);
41 });
42 });
43 </script>
44 </head>
45 <body>
46 <button>动起来</button>
47 <div class="main">
48 文字行号
49 </div>
50 </body>
51 </html>