【jQuery笔记Part2】01-jQuery显示&隐藏&切换动画&侧边广告案例

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100059662

jQuery动画

jQuery动画
- 动画分类
HTML DOM position 属性
显示 show(毫秒, 完成回调函数)
隐藏 hide(毫秒, 完成回调函数)
切换 toggle(毫秒, 完成回调函数)
案例：两侧浮动广告显示或者隐藏控制

jQuery笔记目录

jQuery动画

通过 jQuery 动画方法，能够很轻松地为网页添加非常精彩的视觉效果，给用户一种全新体验。

动画分类

显示、隐藏
滑动、卷动
淡入、淡出
自定义动画

HTML DOM position 属性

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

值	描述
static	默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative	位置被设置为 relative 的元素，可将其移至相对于其正常位置（原来位置）的地方，因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。
absolute	位置设置为 absolute 的元素，可定位于相对于包含它的元素（父级元素）的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。
fixed	位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

显示 show(毫秒, 完成回调函数)

show() 具体用法(来自jQuery文档)

$('#show').click(function () { /*点击显示按钮，显示广告*/
    $('.ad').show(1000,function () {
        console.log('显示完成!');
   });
});

隐藏 hide(毫秒, 完成回调函数)

hide() 具体用法(来自jQuery文档)

$('#hide').click(function () { /*点击隐藏按钮，隐藏广告*/
    $('.ad').hide(1000,function () {
        console.log('隐藏完成！')
    });
});

切换 toggle(毫秒, 完成回调函数)

toggle() 具体用法(来自jQuery文档)

$('#toggle').click(function () { /*点击切换按钮，进行切换*/
    $('.ad').toggle(1000,function () {
        console.log('切换完成！')
    })
});

案例：两侧浮动广告显示或者隐藏控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ad{
            background: url("images/ad.png") no-repeat;
            width: 150px;
            height: 300px;

            position: fixed;
            top: 50%;
            margin-top: -150px;
        }

        .left{
            left: 0;
        }

        .right{
            right: 0;
        }
        .close{
            width: 16px;
            height: 16px;
            position: absolute; /*绝对定位是相对父级元素*/
            right: 10px;
            top: 10px;
        }

    </style>
</head>
<body>
    <div class="ad left">
        <img class="close" src="images/close.png" alt="">
    </div>

    <div class="ad right">
        <img class="close" src="images/close.png" alt="">
    </div>

    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="toggle">切换</button>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function () {
        $('#show').click(function () { /*点击显示按钮，显示广告*/
            $('.ad').show(1000,function () {
                console.log('显示完成!');
            });
        });
        $('#hide').click(function () { /*点击隐藏按钮，隐藏广告*/
            $('.ad').hide(1000,function () {
                console.log('隐藏完成！')
            });
        });
        $('#toggle').click(function () { /*点击切换按钮，进行切换*/
            $('.ad').toggle(1000,function () {
                console.log('切换完成！')
            })
        });
        $('.close').click(function () { /*点击X让div隐藏，即让父元素隐藏*/
            $(this).parent().hide(1000,function () {
                console.log('隐藏完成！')
            })
        })
    });
    
</script>
</body>
</html>