web笔记（4.16）

最新推荐文章于 2024-09-05 15:28:13 发布

中国正能量

最新推荐文章于 2024-09-05 15:28:13 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/weixin_44772351/article/details/89416812

版权

1.淡入淡出动画，二级菜单（jQuery实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        #div1,#div4,#div2,#div3{
            padding: 20px;
            text-align: center;
            background-color: #fffe32;
            border: 1px solid #13ffff;
        }
        #div4{
            padding: 100px;
            display: none;
        }

    </style>
    <script>
        $(document).ready(function () {
            $("#div1").click(function () {
                $("#div4").slideDown(888);
            });
            $("#div2").click(function () {
                $("#div4").slideUp(888);
            });
            $("#div3").click(function () {
                $("#div4").slideToggle(888);
            });
        });
    </script>
</head>
<body>
<div id="div1">出现</div>
<div id="div2">隐藏</div>
<div id="div3">toggle</div>
<div id="div4">helloword</div>

</body>
<html>

效果图：
在这里插入图片描述
2.slide window:滑动窗口
animate（）：方法用于创建自定义的动画
jQuery动画效果总结：
显示：show（），隐藏：hide（），显示与隐藏：toggle（）
向上滑动：slideUP（），向下滑动：slideDown（），上下合并：slideToggle（）
animate（）