第五章 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()方法是 ...

随机推荐

第十一章、认识与学习 BASH 数据流重导向
数据流重导向就是将某个命令运行后应该要出现在屏幕上的数据, 给它导向到其他的地方,例如文件或者是装置 (例如打印机之类的)! 什么是数据流重导向命令运行过程如下: 图 5.1.1.命令运行过程的数据 ...
hdu 3617 Happy 2009
Happy 2009 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
WIN7 如何关闭Aero
控制面板-性能信息和工具-调整视觉效果-视觉效果里面选择调整为最佳性能,这样就关闭了win7的Aero特效
我的JS 类写法
长这样! var p,p1; //构造函数 function Person(name) { this.name = name; } //原型对象 var proto = { getName : fun ...
网站WAF的检测
[wafw00f]: 项目地址: https://github.com/sandrogauci/wafw00f WAFW00F是识别和指纹Web应用防火墙(WAF)产品,其工作原理是首先通过发送一个正 ...
C#中反射的使用（How to use reflect in CSharp）（1）
最近想做一个插件式的软件给公司的监控用,初步的想法是使用C#去反射Dll,Invoke其中的方法.此文仅供开发参考,不涉及原理,98%的代码以及2%的废话. 测试Solution是这么建的(.NET ...
PSObject
PSBASE the raw view of the object PSADAPTED the fully adapted view of the object PSEXTENDED just the ...
授予普通域用户远程桌面连接DC/客户端权限
普通域用户通过远程桌面登录DC: 1)将该用户加入到 Remote Desktop Users 组中
hdu2594 Simpsons’ Hidden Talents kmp
Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
nginx+tomcat动静分离的核心配置
#所有jsp的页面均交由tomcat或resin处理 location ~ .(jsp|jspx|do)?$ { proxy_set_header Host $host; proxy_set_head ...

第五章 jQuery中的动画

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

随机推荐

热门专题