jQuery系列之动画(三)

最新推荐文章于 2025-03-06 10:12:18 发布

原创最新推荐文章于 2025-03-06 10:12:18 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #动画

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文通过实例展示了如何使用jQuery库实现网页元素的渐入渐出、滑动等动画效果，并控制透明度变化，适用于初学者了解jQuery的基本动画操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示动画</title>
    <style type="text/css">
        * {
            font-size: 30px;
        }

    </style>

    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {

            //渐入渐出
            $("span").click(function () {
                $(this).fadeOut();
            });

            $(".toFadeBtn").click(function () {
                //如果显示,则隐藏
                //如果隐藏,则显示
                $("span").toggle();
            });

            $(".toSlideUpBtn").click(function () {
                $("span").slideUp();
            });

            $(".toSlideDownBtn").click(function () {
                $("span").slideDown();
            });

            //透明度的变化
            $(".alpha").click(function () {
               $("span").fadeTo(5000,"0.1", function () {
                   alert("哈哈哈");
               })
            }).fadeTo(6000,"0")


        });


    </script>

</head>
<body>
<span>1</span>
<br/>
<span>2</span>
<br/>
<span>?</span>
<br/>
<span>6</span>
<br/>
<span>18</span>
<br/>
<button class="toFadeBtn">显示一些</button>
<button class="toSlideUpBtn">从上面滑走了</button>
<button class="toSlideDownBtn">从下面滑出来</button>
<button class="alpha">透明度</button>

</body>
</html>