[php学习十七]JQuery练习2－动画

最新推荐文章于 2016-08-03 22:28:52 发布

灵眼儿上方

最新推荐文章于 2016-08-03 22:28:52 发布

阅读量239

点赞数

分类专栏： php 文章标签：动画 PHP jquery

本文链接：https://blog.csdn.net/liyanq528/article/details/52088782

版权

php 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery效果练习</title>
    <script src="jquery-3.1.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").css({"margin-bottom":"0px"});
            $("#btn1").click(function () {
                $("#divHide").toggle(1000,function () {
                    alert($(this).is(":hidden") == true ?"被隐藏了哦~!":"显示出来啦~!");
                });
            });
            $("#btn2").click(function () {
                $("#divFade").fadeToggle(1000,function () {
                    alert($(this).is(":hidden") == true ?"被隐藏了哦~!":"显示出来啦~!");
                });
            });
            $("#btn3").click(function () {
                $("#divslide").slideToggle(1000,function () {
                    alert($(this).is(":hidden") == true ?"被隐藏了哦~!":"显示出来啦~!");
                });
            });
            $("#btn4").click(function () {
                /*这个链式编程真是爽翻了~*/
                $("#divanimate").css({position:"absolute"})
                        .animate({left: '300px'},1000)
                        .animate({height: '200px'}, 1000)
                        .animate({width: '200px'}, 1000)
                        .animate({fontSize:'40px'},1000)
                        .animate({fontSize:'15px'},1000)
                        .animate({width: '100px'}, 1000)
                        .animate({height: '100px'}, 1000)
                        .animate({left: '10px'},1000,function () {
                            $(this).css({position:'static'});
                        });
            });

        });
    </script>
</head>
<body>
<div style="clear: both">
    <p><small>显示隐藏、淡出淡入、滑上滑下练习</small></p>
    <div id="divHide" style="float: left; width: 100px; height: 100px; background-color: blue"></div>
    <div id="divFade" style="float: left; width: 100px; height: 100px; background-color: rebeccapurple"></div>
    <div id="divslide" style="float: left; width: 100px; height: 100px; background-color: red"></div>
</div>
<div style="clear: both">
    <button id="btn1"  style=" left: 0; font-size: 15px">显示隐藏</button>
    <button id="btn2"  style=" left: 0; font-size: 15px">淡出淡入</button>
    <button id="btn3"  style=" left: 0; font-size: 15px">滑上滑下</button>
</div>
<div style="clear: both">
    <p><small>动画练习</small></p>
    <!--默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！-->
    <div id="divanimate"  style="float: left; width: 100px; height: 100px; background-color: darkolivegreen; ">Hello World</div>
</div>
<div style="clear: both">
    <button id="btn4" style="font-size: 15px">动画展示</button>
</div>
</body>
</html>

灵眼儿上方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[php学习十七]JQuery练习2－动画

JQuery效果练习 $(document).ready(function () { $("p").css({"margin-bottom":"0px"}); $("#btn1").click(function () { $("#divHide").toggle(1000,funct
复制链接

扫一扫