第五章 jQuery中的动画

　　通过jQuery中的动画方法，能轻松地为网页添加精彩的视觉效果，给用户一种全新体验。

　　1.show()方法和hide()方法

　　该方法的功能与css()方法设置display属性效果相同。

　　给show()方法和hide()方法设置参数能有动画效果。例如 show(600);来设置时长600毫秒，同时改变元素的高度，宽度和不透明度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font-size: 13px;

            line-height: 130%;

            padding: 60px;

        }

        #panel

        {

            width: 300px;

            border: 1px solid #0050D0;

        }

        .head

        {

            padding: 5px;

            background: #96E555;

            cursor: pointer;

        }

        .content

        {

            padding: 10px;

            text-indent: 2em;

            border-top: 1px solid #0050D0;

            display: block;

        }

    </style>

    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel h5.head").toggle(function () {

                $(this).next().hide(600);

            }, function () {

                $(this).next().show(600);

            })

        })

    </script>

</head>

<body>

    <div id="panel">

        <h5 class="head">

            什么是jQuery?</h5>

        <div class="content">

            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

        </div>

    </div>

</body>

</html>

　　2.fadeIn()方法和fadeOut()方法

　　该方法只改变元素的不透明度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font-size: 13px;

            line-height: 130%;

            padding: 60px;

        }

        #panel

        {

            width: 300px;

            border: 1px solid #0050D0;

        }

        .head

        {

            padding: 5px;

            background: #96E555;

            cursor: pointer;

        }

        .content

        {

            padding: 10px;

            text-indent: 2em;

            border-top: 1px solid #0050D0;

            display: block;

        }

    </style>

    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel h5.head").toggle(function () {

                $(this).next().fadeOut();

            }, function () {

                $(this).next().fadeIn();

            })

        })

    </script>

</head>

<body>

    <div id="panel">

        <h5 class="head">

            什么是jQuery?</h5>

        <div class="content">

            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

        </div>

    </div>

</body>

</html>

　　3.slideUp()方法和sildeDown()方法

　　该方法只改变元素的高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font-size: 13px;

            line-height: 130%;

            padding: 60px;

        }

        #panel

        {

            width: 300px;

            border: 1px solid #0050D0;

        }

        .head

        {

            padding: 5px;

            background: #96E555;

            cursor: pointer;

        }

        .content

        {

            padding: 10px;

            text-indent: 2em;

            border-top: 1px solid #0050D0;

            display: block;

        }

    </style>

    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel h5.head").toggle(function () {

                $(this).next().slideUp();

            }, function () {

                $(this).next().slideDown();

            })

        })

    </script>

</head>

<body>

    <div id="panel">

        <h5 class="head">

            什么是jQuery?</h5>

        <div class="content">

            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

        </div>

    </div>

</body>

</html>

　　4.自定义动画方法animate()

　　语法：animate(params,speed,callback);

　　params:包含样式属性及值的映射，如{prap1:"value1",prop2:"value2",...}

　　speed:速度参数，可选。

　　callback：动画完成时执行的函数，可选。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            padding: 60px;

        }

        #panel

        {

            position: relative;

            width: 100px;

            height: 100px;

            border: 1px solid #0050D0;

            background: #96E555;

            cursor: pointer;

        }

    </style>

    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel").click(function () {

                $(this).animate({ left: "500px" }, 3000);

            })

        })

    </script>

</head>

<body>

    <div id="panel">

    </div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            padding: 60px;

        }

        #panel

        {

            position: relative;

            width: 100px;

            height: 100px;

            border: 1px solid #0050D0;

            background: #96E555;

            cursor: pointer;

        }

    </style>

    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel").click(function () {

                $(this).animate({ left: "500px", height: "200px" }, 3000);

            })

        })

    </script>

</head>

<body>

    <div id="panel">

    </div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            padding: 60px;

        }

        #panel

        {

            position: relative;

            width: 100px;

            height: 100px;

            border: 1px solid #0050D0;

            background: #96E555;

            cursor: pointer;

        }

    </style>

    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel").click(function () {

                $(this).animate({ left: "500px" }, 3000)

                .animate({ height: "200px" }, 3000);

            })

        })

    </script>

</head>

<body>

    <div id="panel">

    </div>

</body>

</html>

　　5.动态回调函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            padding: 60px;

        }

        #panel

        {

            position: relative;

            width: 100px;

            height: 100px;

            border: 1px solid #0050D0;

            background: #96E555;

            cursor: pointer;

        }

    </style>

    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel").css("opacity", "0.5"); //设置不透明度

            $("#panel").click(function () {

                $(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)

                     .animate({ top: "200px", width: "200px" }, 3000, function () {

                         $(this).css("border", "5px solid blue");

                     })

            });

        });

    </script>

</head>

<body>

    <div id="panel">

    </div>

</body>

</html>

　　6.停止动画方法stop()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font-size: 13px;

            line-height: 130%;

            padding: 60px;

        }

        #panel

        {

            width: 60px;

            border: 1px solid #0050D0;

            height: 22px;

            overflow: hidden;

        }

        .head

        {

            padding: 5px;

            background: #96E555;

            cursor: pointer;

            width: 300px;

        }

        .content

        {

            padding: 10px;

            text-indent: 2em;

            border-top: 1px solid #0050D0;

            display: block;

            width: 280px;

        }

    </style>

    <script src="../../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel").hover(function () {

                $(this).stop().animate({ height: "150", width: "300" }, 200);

            }, function () {

                $(this).stop().animate({ height: "22", width: "60" }, 300);

            });

        });

    </script>

</head>

<body>

    <div id="panel">

        <h5 class="head">

            什么是jQuery?</h5>

        <div class="content">

            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

        </div>

    </div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Panel</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font-size: 13px;

            line-height: 130%;

            padding: 60px;

        }

        #panel

        {

            width: 60px;

            border: 1px solid #0050D0;

            height: 22px;

            overflow: hidden;

        }

        .head

        {

            padding: 5px;

            background: #96E555;

            cursor: pointer;

            width: 300px;

        }

        .content

        {

            padding: 10px;

            text-indent: 2em;

            border-top: 1px solid #0050D0;

            display: block;

            width: 280px;

        }

    </style>

    <script src="../../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#panel").hover(function () {

                $(this).stop(true)

                    .animate({ height: "150" }, 200)

                    .animate({ width: "300" }, 300)

            }, function () {

                $(this).stop(true)

                    .animate({ height: "22" }, 200)

                    .animate({ width: "60" }, 300)

            });

        });

    </script>

</head>

<body>

    <div id="panel">

        <h5 class="head">

            什么是jQuery?</h5>

        <div class="content">

            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

        </div>

    </div>

</body>

</html>

　　7.其他动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Panel</title>

<style type="text/css">

*{margin:0;padding:0;}

body { font-size: 13px; line-height: 130%; padding: 60px }

#panel { width: 300px; border: 1px solid #0050D0 }

.head { padding: 5px; background: #96E555; cursor: pointer }

.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }

</style>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

    $("#panel h5.head").click(function(){

         $(this).next().toggle();

    })

})

</script>

</head>

<body>

<div id="panel">

    <h5 class="head">什么是jQuery?</h5>

    <div class="content">

        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

    </div>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Panel</title>

<style type="text/css">

*{margin:0;padding:0;}

body { font-size: 13px; line-height: 130%; padding: 60px }

#panel { width: 300px; border: 1px solid #0050D0 }

.head { padding: 5px; background: #96E555; cursor: pointer }

.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }

</style>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

    $("#panel h5.head").click(function(){

         $(this).next().slideToggle();

    })

})

</script>

</head>

<body>

<div id="panel">

    <h5 class="head">什么是jQuery?</h5>

    <div class="content">

        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

    </div>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Panel</title>

<style type="text/css">

*{margin:0;padding:0;}

body { font-size: 13px; line-height: 130%; padding: 60px }

#panel { width: 300px; border: 1px solid #0050D0 }

.head { padding: 5px; background: #96E555; cursor: pointer }

.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; }

</style>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

    $("#panel h5.head").click(function(){

         $(this).next().fadeTo(600, 0.2);

    })

})

</script>

</head>

<body>

<div id="panel">

    <h5 class="head">什么是jQuery?</h5>

    <div class="content">

        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

    </div>

</div>

</body>

</html>

PS：参考文献《锋利的jQuery》

第五章 jQuery中的动画的更多相关文章

jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...
第3章 jquery中的事件和动画
一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...
jQuery学习笔记（四）jQuery中的动画
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法自定义动画方法animate toogle(),slideTog ...
jQuery_第五章_事件和动画
Jquery中的事件与动画一.window.onload和$(document).read()的细微差别 (1)执行时机 window.onload:所有元素(包括元素的所有关联文件)完全加载到浏览 ...
史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
jQuery笔记（四）jQuery中的动画
jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...

随机推荐

解决配置android开发环境eclipse获取ADT获取不到,一直"Pending"
在安装完Android SDK后eclipse要获取ADT, 可是由于GFW的存在, eclipse经常无法从http://dl-ssl.google.com/android/eclipse 获取到任 ...
在Visual Studio中利用NTVS创建Pomelo项目
刚看新闻,才知道微软发布了Node.js Tools for Visual Studio(NTVS),受够了WebStorm输入法Bug的困扰,这下终于可以解脱了.以Pomelo为例,运行命令:pom ...
HDU-4679 Terrorist’s destroy 树形DP,维护
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4679 题意:给一颗树,每个边有一个权值,要你去掉一条边权值w剩下的两颗子树中分别的最长链a,b,使得w ...
[AHOI2006]文本编辑器 Splay tree区间操作
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1269 Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个 ...
Altium Designer PCB 常用功能键
altium designer 5种走线模式的切换 : shift+space 方格与格点的切换:View-Grids-ToggleVisible Grid Kind源点:Edit-Origin-Se ...
优化UITableViewCell高度计算的那些事（RunLoop）
这篇总结你可以读到: UITableView高度计算和估算的机制不同iOS系统在高度计算上的差异 iOS8 self-sizing cell UITableView+FDTemplateLayout ...
[转] C++ Redistributable Package版本详解
我们使用的程序常常都需要C++ Redistributable Package的支持.C++ Redistributable Package有众多版本,给安装带了不便. 目前(2013-12-04) ...
Notes(一)
Numerous experimental measurements in spatially complex systems have revealed anomalous diffusion in ...
Genymotion中文手册
目录1.概述 22.特点 22.1最擅长于虚拟Android 22.2高可控性 22.3管理你的设备 22.4从Eclipse中开启虚拟设备 33.要求 33.1操作系统要求 33.2系统硬件要求 3 ...
Project Management - 1) Schedule Your Project
1. 根据项目的理解,列出主要的里程碑. (初始甘特图) 2. 多使用即时贴,甘特图可以贴在墙上以供项目组成员提醒. 3. 切忌过早细化项目日程,这样会让老板或出资人以为项目中几乎没有风险, 他们会把 ...

第五章 jQuery中的动画

第五章 jQuery中的动画的更多相关文章

随机推荐

热门专题