第五章 jQuery中的动画

http://www.cnblogs.com/shuibing/p/4080543.html

通过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>
时间： 2024-10-08 23:21:34

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

五、jQuery中的动画

通过jQuery的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验. 一.show()方法和hide()方法 1.show()方法和hide()方法 show()方法和hide()方法是jQuery中最基本的动画方法.在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为none. 隐藏元素: $("element").hide();  //通过hide()方法隐藏元素 也可以通过css方法设置display属性 $("el

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

前端编程提高之旅（十六）————jquery中的动画

    上一篇文章对jquery中的事件做了总结,这篇文章主要对jquery中的动画做一下总结归类.最近微信端分享中,有很多页面交互及动画做的非常受欢迎,非常符合移动端体验.看似花哨的动画从本质上都脱离不了编写动画的基本方法.乐帝将jquery动画部分内容,做了一个简单的归类.     如下图:     如上图所示,无论多复杂的动画,从实现上都采用这些最底层的动画方法.本篇将从动画方法和与动画状态有关的方法讲起.    一.动画方法    1.同时改变高.宽.不透明度方法    这里涉及show

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

jQuery中停止动画stop

jQuery中停止动画stop 动画在执行过程中是允许被暂停的,当一个元素调用.stop()方法,当前正在运行的动画(如果有的话)立即停止 语法: .stop( [clearQueue ], [ jumpToEnd ] ) .stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] ) stop还有几个可选的参数,简单来说可以这3种情况 .stop(); 停止当前动画,点击在暂停处继续开始 .stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画

jQuery中animate动画第二次点击事件没反应

jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部 -300px的位置,第二次点击时的并不是page在

jQuery之第4章 jQuery中的事件和动画

一.jQuery中的事件: 1.加载DOM: jQuery:$(document).ready(); JavaScript:window.onload(); $(window).load(function(){ }) 等价于 window.onload = function(){} 简写方式: (1)$(document).ready(functon(){}) (2)$().ready(functon(){}) (3)$(function(){}) 2.事件绑定: bind(); 3.合成事件:

jQuery 第五章 实例方法 详解动画之animate()方法

.animate()   .stop()   .finish() ------------------------------------------------------------------------------ .animate() 参数:(target, duration, easing, callback) target:  到达的目标点, 例如{ width : '+=100', height: '+=100'}  选择器选中的元素的宽和高,加上100.值 可以写 数字  10

《软件工程 ——理论、方法与实践》知识概括第五章 软件工程中的形式化方法

第5章 软件工程中的形式化方法    从广义上讲,形式化方法(Formal Method)是指将离散数学的方法用于解决软件工程领域的问题,主要包括建立精确的数学模型以及对模型的分析活动.狭义的讲,形式化方法是运用形式化语言,进行形式化的规格描述.模型推理和验证的方法.将形式化方法运用于软件工程实践当中的只要目的是保证软件的正确性. 软件生命周期中的形式化转化策略:常用转化策略.直接转化策略和运用半形式化表示的中间转化策略. 进行模型化的过程中涉及到三种系统模型:现实世界.模型表示和计算机系统.