jQuery笔记四——动画相关设置

最新推荐文章于 2023-05-17 22:08:06 发布

阿牛大牛中

最新推荐文章于 2023-05-17 22:08:06 发布

阅读量139

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46351593/article/details/107510559

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

显示和隐藏动画
- 对联广告练习
展开和收起动画
- 折叠菜单练习
- 下拉菜单
淡入淡出动画
自定义动画
delay与stop

显示和隐藏动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示隐藏动画</title>
    <style>
        * {
            margin: 0;
            ;
            padding: 0;
        }
        
        div {
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert("显示动画完成");
                });
            });
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert("隐藏动画完成");
                });
            });
            $("button").eq(2).click(function() {
                $("div").toggle(1000);
            });

        });
    </script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>

</html>

通过show()与hide()可以控制动画的显示，第一个参数为时间，单位毫秒，第二个参数时动画执行完毕后执行的回调函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hshp5qUQ-1595391530658)(/Users/mac/Desktop/MarkDown /jQuery/笔记4/1.gif)]

对联广告练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>attr小练习</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function() {
                var input = document.getElementsByTagName("input")[0];
                text = input.value;
                $("img").attr("src", text);
            }
        });
    </script>
</head>

<body>
    <input type="text">
    <button>切换图片</button><br>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UG17Nb22-1595391530663)(/Users/mac/Desktop/MarkDown /jQuery/笔记4/2.gif)]

展开和收起动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展开和收起</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            height: 300px;
            width: 100px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").slideDown(1000, function() {
                    console.log("展开完毕");

                });
            });
            $("button").eq(1).click(function() {
                $("div").slideUp(1000, function() {
                    console.log("收起完毕");

                });
            });
            $("button").eq(2).click(function() {
                $("div").slideToggle(1000, function() {
                    console.log("切换完毕");

                });
            });
        });
    </script>
</head>

<body>
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txV9gc4P-1595391530664)(/Users/mac/Desktop/MarkDown /jQuery/笔记4/3.gif)]

用法与上面的实现与隐藏一样。

折叠菜单练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d13zwvwJ-1595391530667)(/Users/mac/Desktop/MarkDown /jQuery/笔记3/7.gif)]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折叠菜单</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            list-style: none;
            width: 300px;
            margin: 100px auto;
        }
        
        .nav>li {
            position: relative;
            border: 1px solid #000000;
            line-height: 35px;
            border-bottom: none;
            text-indent: 2em;
        }
        
        .nav>li:last-child {
            border-bottom: 1px solid #000000;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        
        .nav>li:first-child {
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }
        
        .nav>li>span {
            display: inline-block;
            position: absolute;
            right: 15px;
        }
        
        .sub {
            display: none;
        }
        
        .sub>li {
            list-style: none;
            background-color: skyblue;
            border-bottom: 1px solid white;
        }
        
        .sub>li:hover {
            background-color: pink;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 监听一级菜单的点击事件
            $(".nav>li").click(function() {
                // 拿到二级菜单
                var $sub = $(this).children(".sub");
                // 让二级菜单展开
                $sub.slideDown(1000);
                // 拿到所有非当前二级菜单
                var otherSub = $(this).siblings().children(".sub");
                // 让所有非当前二级菜单收起
                otherSub.slideUp(1000);
                // 让被点击的一级菜单箭头旋转
                var current = $(this).children("span");
                // 给当前被点击的一级菜单的span修改class，更改favicon图标
                current.attr("class", "iconfont icon-icon-test4");
                // 让所有非被点击的一级菜单箭头还原
                $(this).siblings().children("span").attr("class", "iconfont icon-icon-test12");
            });
        });
    </script>
</head>

<body>
    <ul class="nav">
        <li>一级菜单<span class="iconfont icon-icon-test12"></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span class="iconfont icon-icon-test12"></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span class="iconfont icon-icon-test12"></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span class="iconfont icon-icon-test12"></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span class="iconfont icon-icon-test12"></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span class="iconfont icon-icon-test12"></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span class="iconfont icon-icon-test12"></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单<span class="iconfont icon-icon-test12"></span>
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>

</html>

下拉菜单

我们在编写动画的时候尽量，添加stop方法，保证不会出现bug。下面两图分别是添加了stop和未添加stop的实例。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vwK2iLKT-1595391530669)(/Users/mac/Desktop/MarkDown /jQuery/笔记3/8.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6mQPnhJW-1595391530671)(/Users/mac/Desktop/MarkDown /jQuery/笔记3/9.gif)]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            list-style: none;
            width: 300px;
            height: 50px;
            background-color: skyblue;
            margin: 100px auto;
        }
        
        .nav>li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
        }
        
        .sub {
            list-style: none;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 监听一级菜单的移入
            $(".nav>li").mouseenter(function() {
                // 拿到二级菜单
                var $sub = $(this).children(".sub");
                // 停止当前执行的动画
                $sub.stop();
                // 让二级菜单震展开
                $sub.slideDown(1000);

            });
            // 监听一级菜单的移出
            $(".nav>li").mouseleave(function() {
                // 拿到二级菜单
                var $sub = $(this).children(".sub");
                // 停止当前执行的动画
                $sub.stop();
                // 让二级菜单震收起
                $sub.slideUp(1000);
            });
        });
    </script>
</head>

<body>
    <ul class="nav">
        <li>一级菜单
            <ul class="sub">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单</li>
        <li>一级菜单</li>
    </ul>
</body>

</html>

淡入淡出动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HA9EhcdV-1595391530672)(/Users/mac/Desktop/MarkDown /jQuery/笔记3/10.gif)]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淡入淡出</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: none;
            width: 300px;
            height: 300px;
            background-color: purple;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").fadeIn(1000, function() {
                    alert("淡入完毕");
                });
            });
            $("button").eq(1).click(function() {
                $("div").fadeOut(1000, function() {
                    alert("淡出完毕");
                });
            });
            $("button").eq(2).click(function() {
                $("div").fadeToggle(1000, function() {
                    alert("切换完毕");
                });
            });
            $("button").eq(3).click(function() {
                $("div").fadeTo(1000, 0.5, function() {
                    alert("切换到半透明完毕");
                });
            });
        });
    </script>
</head>

<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>
</body>

</html>

自定义动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ibPoue8g-1595391530674)(/Users/mac/Desktop/MarkDown /jQuery/笔记3/11.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AhrhjuEi-1595391530675)(/Users/mac/Desktop/MarkDown /jQuery/笔记3/12.gif)]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 5px;
        }
        
        .two {
            background-color: skyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {

            $("button").eq(0).click(function() {
                // animate四个参数：
                /*
                第一个参数：接受一个对象，可以在对象中修改属性
                第二个参数：指定动画时长
                第三个参数：指定动画节奏，默认是swing（慢快慢）
                第四个参数：动画执行完毕后的回调函数
                */
                $(".one").animate({
                    marginLeft: 500
                }, 5000, "linear", function() {
                    alert("自定义动画执行完毕");
                });
                $(".two").animate({
                    marginLeft: 500
                }, 5000, "swing", function() {
                    alert("自定义动画执行完毕");
                });
            });
            $("button").eq(1).click(function() {
                $(".one").animate({
                    width: "+=100"
                }, 1000, "linear", function() {
                    alert("自定义动画执行完毕");
                });
            });
            $("button").eq(2).click(function() {
                $(".one").animate({
                    width: "hide"//隐藏宽度
                }, 1000, "linear", function() {
                    alert("自定义动画执行完毕");
                });
            });
        });
    </script>
</head>

<body>
    <button>操作属性</button>
    <button>累加属性</button>
    <button>关键字</button>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

delay与stop

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hxyukewo-1595391530676)(/Users/mac/Desktop/MarkDown /jQuery/笔记3/13.gif)]

$("button").eq(0).click(function() {
    $(".one").animate({
        width: 500
    }, 1000).delay(1000).animate({
        height: 500
    }, 1000).animate({
        width: 100
    }, 1000).animate({
        height: 100
    }, 1000)
});

中间添加delay可以让动画执行停止一段时间。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>delay与stop</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .two {
            width: 500px;
            height: 10px;
            background-color: skyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $(".one").animate({
                    width: 500
                }, 1000).animate({
                    height: 500
                }, 1000).animate({
                    width: 100
                }, 1000).animate({
                    height: 100
                }, 1000)
            });
            $("button").eq(1).click(function() {
                //stop("控制后续","控制当前")
                // $("div").stop();
                // 停止当前和后续所有动画
                // $("div").stop(true, false);
                // $("div").stop(true);
                // 立即完成当前动画，并停止后续所有
                $("div").stop(true, true);
            });
        });
    </script>
</head>

<body>
    <button>开始</button>
    <button>停止</button>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-beObfQtB-1595391530680)(/Users/mac/Desktop/MarkDown /jQuery/笔记3/14.gif)]

阿牛大牛中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记四——动画相关设置

文章目录显示和隐藏动画对联广告练习展开和收起动画折叠菜单练习下拉菜单淡入淡出动画自定义动画delay与stop显示和隐藏动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>显示
复制链接

扫一扫