JQuery 动画

稻田里展望者

已于 2022-03-23 15:32:09 修改

阅读量356

点赞数 2

分类专栏： javaWeb Web前端技术文章标签： JQuery

于 2022-03-23 15:19:32 首次发布

本文链接：https://blog.csdn.net/weixin_46441425/article/details/123686517

版权

javaWeb 同时被 2 个专栏收录

94 篇文章 3 订阅

订阅专栏

Web前端技术

86 篇文章 3 订阅

订阅专栏

默认的显示方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script>
        //隐藏div
        function hideFn() {
            $("#showDiv").hide("slow","swing",function () {
                alert("隐藏了...")
            })
        }
        //显示div
        function showFn() {
            $("#showDiv").show("slow","swing",function () {
                alert("显示了...")
            })
        }
        //切换显示和隐藏div
        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="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

在这里插入图片描述

滑动显示

<script>
//显示div
        function SlideshowFn() {
            $("#showDiv").slideDown("slow");
        }
</script>

<input type="button" value="滑动显示" onclick="SlideshowFn()">

淡入淡出

//淡入淡出
        function FadeOutFn() {
            $("#showDiv").fadeToggle("5000");
        }

<input type="button" value="淡入淡出" onclick="FadeOutFn()">

稻田里展望者

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery 动画

动画的各种显示和隐藏效果
复制链接

扫一扫

专栏目录