4、动画

最新推荐文章于 2023-04-04 11:23:40 发布

青叶的全栈之路

最新推荐文章于 2023-04-04 11:23:40 发布

阅读量108

点赞数

分类专栏： jQuery 文章标签： js jquery

本文链接：https://blog.csdn.net/dream_AI/article/details/106930238

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

动画

显示和隐藏元素

一、显示和隐藏元素

1.1、默认效果

show（[speed，[easing]，[fun] ]）：显示元素
hide（[speed，[easing]，[fun] ]）：隐藏元素
toggle（[speed，[easing]，[fun] ]）：切换（显示/隐藏）元素

1.2、滑动效果

slideDown（[speed，[easing]，[fun] ]）：显示元素
slideUp（[speed，[easing]，[fun] ]）：隐藏元素
slideToggle（[speed，[easing]，[fun] ]）：切换（显示/隐藏）元素

1.3、淡入/淡出效果

fadeIn（[speed，[easing]，[fun] ]）
fadeOut（[speed，[easing]，[fun] ]）
fadeToggle（[speed，[easing]，[fun] ]）

关于三个参数：

speed：动画的速度。【slow、normal、fast、毫秒值】
easing：动画的切换效果。【swing（默认）、linear】
swing：动画执行时，初始快、中间慢、最后快。
linear：动画执行时，保持匀速

fun：每当动画完成后都会执行的函数。

<body>
    <div>
        <button onclick="hiddenDiv()">隐藏DIV</button>
        <button onclick="showDiv()">显示DIV</button>
        <button onclick="toggleDiv()">隐藏/显示DIV</button>
    </div>
    <div id="test" style="background-color: hotpink">
        这是一个DIV
    </div>
</body>
<script>
    function hiddenDiv(){
        $("#test").fadeOut(result(1));//隐藏DIV
    }
    function showDiv(){
        $("#test").fadeIn(result(2));//显示DIV
    }
    function toggleDiv(){
        $("#test").fadeToggle(1000,"linear",result(3));//切换DIV
    }
    function result(i) {
        switch (i) {
            case 1:
                console.log("DIV隐藏成功");
                break;
            case 2:
                console.log("DIV显示成功");
                break;
            case 3:
                console.log("DIV切换成功");
                break;
        }
    }
</script>