jQuery快捷动画

最新推荐文章于 2024-06-14 09:24:52 发布

温柔的二斤半

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量26

点赞数 1

分类专栏： jQuery动画文章标签： jquery 前端 javascript 动画

本文链接：https://blog.csdn.net/m0_67388537/article/details/131617381

版权

jQuery动画专栏收录该内容

7 篇文章 0 订阅

订阅专栏

快捷动画效果

常见动画操作如下：

动画名	说明
show	让元素出现
hide	隐藏元素
toggle	切换元素出现与隐藏
slideDown	元素滑入，类似放下卷门帘
slideUp	元素滑出，类似上卷门帘
slideToggle	切换元素的滑入滑出
fadeIn	元素渐现
fadeOut	元素渐隐
fadeToggle	切换元素的淡入淡出效果

上述方法均接受三个可选参数：duration、timing-function、fn，三个参数与 animate 动画的参数效果一致，不再赘述。

补充：还有一个 $ele.fadeTo(时长, 透明度) 的方法可以快捷的给元素添加透明度动画。

Tips：让元素出现和隐藏的动画默认是直接改变元素的 display 属性的，即闪现动画。添加上时间才能看到动画过程。

例：

<style>
    .box{
        position: absolute;
        top: 50px;
        left: 50px;
        width: 300px;
        height: 300px;
        background-color: #f00;
    }
</style>
<body>
    <div class="box"></div>

    <button>show</button>
    <button>hide</button>
    <button>toggle</button>

    <button>slideDown</button>
    <button>slideUp</button>
    <button>slideToggle</button>

    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>

    <button>fadeTo</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var $box = $(".box");

        $("button:eq(0)").click(function (){
            $box.show(1000, function (){
                console.log("出现了");
                $box.animate({
                    backgroundColor: "#00f"
                })
            });
        })
        $("button:eq(1)").click(function (){
            $box.hide(1000, function (){
                console.log("消失了");
            });
        })
        $("button:eq(2)").click(function (){
            $box.toggle(1000);
        })

        $("button:eq(3)").click(function (){
            $box.slideDown(1000);
        })
        $("button:eq(4)").click(function (){
            $box.slideUp(1000);
        })
        $("button:eq(5)").click(function (){
            $box.slideToggle(1000);
        })

        $("button:eq(6)").click(function (){
            $box.fadeIn(1000);
        })
        $("button:eq(7)").click(function (){
            $box.fadeOut(1000);
        })
        $("button:eq(8)").click(function (){
            $box.fadeToggle(1000);
        })

        $("button:eq(9)").click(function (){
            $box.fadeTo(1000, .2);
        })
    </script>
</body>