JQuery 动画默认显示和隐藏方式show\hide\toggle

最新推荐文章于 2023-05-24 13:16:04 发布

_七七

最新推荐文章于 2023-05-24 13:16:04 发布

阅读量681

点赞数

分类专栏： JQuery 文章标签： js html java

本文链接：https://blog.csdn.net/qq_43472877/article/details/106768481

版权

JQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

默认显示和隐藏方式

show([speed, [easing],[fn]])

speed :动画的速度。三个预定义的值(“slow”, “normal”, “fast” )或表示动画时长的毫秒数值(如: 1000)
easing :用来指定切换效果，默认是"swing",可用参数"linear"
swing:动画执行时效果是先慢,中间快，最后又慢
linear :动画执行时速度是匀速的
fn: 在动画完成时执行的函数，每个元素执行一次。

hide([speed, [easing],[fn]])
toggle([speed], [easing],[fn])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>

    <script>
        //隐藏div
        function hideFn() {
            $("#showDiv").hide(2000,"linear")
        }

        //显示div
        function showFn() {
            $("#showDiv").show("slow","swing")
        }

        //切换隐藏和显示
        function toggleFn() {
            $("#showDiv").toggle("slow")
        }
    </script>

</head>
<body>
    <input type="button" value="隐藏div" onclick="hideFn()">
    <input type="button" value="显示div" onclick="showFn()">
    <input type="button" value="切换div的显示和隐藏" onclick="toggleFn()">

    <div id="showDiv" style="height: 200px; width:200px; background-color: pink">
        div显示和隐藏
    </div>
</body>
</html>

_七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 动画默认显示和隐藏方式show\hide\toggle

默认显示和隐藏方式show([speed, [easing],[fn]])speed :动画的速度。三个预定义的值(“slow”, “normal”, “fast” )或表示动画时长的毫秒数值(如: 1000)easing :用来指定切换效果，默认是"swing",可用参数"linear"swing:动画执行时效果是先慢,中间快，最后又慢linear :动画执行时速度是匀速的fn: 在动画完成时执行的函数，每个元素执行一次。hide([speed, [easing],[fn]])t
复制链接

扫一扫

专栏目录