zoukankan html css js c++ java

第五章 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",  "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",  "300" }, 200);
            }, function () {
                $(this).stop().animate({ height: "22",  "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({  "300" }, 300)
            }, function () {
                $(this).stop(true)
                    .animate({ height: "22" }, 200)
                    .animate({  "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>

查看全文

相关阅读:
BZOJ 2034 【2009国家集训队】最大收益
 vijos P1780 【NOIP2012】开车旅行
 BZOJ 2115 【WC2011】 Xor
BZOJ 3631 【JLOI2014】松鼠的新家
 BZOJ 4717 改装
 BZOJ 2957 楼房重建
 BZOJ 4034 【HAOI2015】 T2
BZOJ 1834 【ZJOI2010】 network 网络扩容
 BZOJ 2440 【中山市选2011】完全平方数
 BZOJ 2733 【HNOI2012】永无乡

原文地址：https://www.cnblogs.com/shenming/p/4118993.html