【锋利的jQuery】9、jQuery中的动画

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery中的动画</title>
    <!-- 在head中引入jQuery 这个功能跟jQuery的版本还是有点关系，建议用老版本-->
    <script type="text/javascript" src="../../lib/jquery-3.1.1.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

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

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

        #panel4, #panel5 {
            position: relative;
            width: 300px;
            height: 500px;
            border: 1px solid #0050D0;
            background: #96E555;
            cursor: pointer;
        }

        .head {
            height: 24px;
            line-height: 24px;
            text-indent: 10px;
            background: #96E555;
            cursor: pointer;
            width: 100%;
        }

        .content {
            padding: 10px;
            text-indent: 24px;
            border-top: 1px solid #0050D0;
            display: block;
        }
    </style>
    <script type="application/javascript">

        $(function () {
//            $("#panel h5.head").toggle(function(){
//                $(this).next().hide(1000);
//            }, function(){
//                $(this).next().show(1000);
//            })
            $("#button1").bind("click", function () {
                var content = $(this).next();
                if (content.is(":visible")) {
                    //如果展示，就隐藏
                    content.hide(1000);
                } else {
                    content.show(600);
                }
            })

            $("#button2").bind("click", function () {
                var content = $(this).next();
                if (content.is(":visible")) {
                    //如果展示，就隐藏
                    content.fadeOut();
                } else {
                    content.fadeIn();
                }
            })

            $("#button3").bind("click", function () {
                var content = $(this).next();
                if (content.is(":visible")) {
                    //如果展示，就隐藏
                    content.slideUp();
                } else {
                    content.slideDown();
                }
            })

            $("#button4").click(function () {
                //+=表示累加，-=表示累减，什么都不加，表示就是相对位置
//                $("#panel4").animate({left: "+=500px", height: "-=100px"}, 1000);
                //如果要排个顺序，执行left和height，那就要拆开
                $("#panel4").animate({left: "+=300px"}, 1000);
                $("#panel4").animate({height: "-=100px"}, 1000);
            })

            $("#button5").click(function(){
                //设置不透明
                $("#panel5").css("opacity", "0.5");
                $("#panel5").animate({left: "400px", height: "200px", opacity: "1"}, 1000)
                        .animate({top: "200px", height: "200px", opacity: "1"}, 1000, function(){
                            $(this).css("border", "5px solid blue");
                        })
                        .fadeOut("slow");
            })

        })


    </script>

</head>
<body>
<h3>hide和show方法</h3>
<input id="button1" type="button" value="hide和show动画"/>

<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>

<br><br><br><br>

<h3>fadeln方法和fadeOut方法</h3>
<input id="button2" type="button" value="fadeln方法和fadeOut动画"/>

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

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

<h3>slideUp方法和slidDown方法</h3>
<input id="button3" type="button" value="slideUp方法和slidDown动画"/>

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

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

<br><br><br><br>

<h3>自定义animate方法</h3>
<input id="button4" type="button" value="自定义animate动画"/>

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

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

<br><br><br><br>

<h3>综合动画方法</h3>
<input id="button5" type="button" value="综合动画"/>

<div id="panel5">
    <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>
posted @ 2017-04-04 18:45 cutter_point 阅读(92) 评论(0) 收藏举报
刷新页面返回顶部
cutter_point

【锋利的jQuery】9、jQuery中的动画

公告
