Web实训4.16

最新推荐文章于 2023-04-23 17:28:13 发布

是在为难我大雄

最新推荐文章于 2023-04-23 17:28:13 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/weixin_44781447/article/details/89422692

版权

一：回顾上周知识
jQuery动画效果:隐藏和显示，hide（），show（）。
滑动： slidedown（），slideup（）。
jQuery停止动画：stop()
jquery-----链（chaining）。
二：jQuery代码淡入淡出动画：
show()：出现,hide()：隐藏,toggle()：来回滑动,slideUp(),slideDown(),slideToggle()
代码实现：

<style>
    #slide,#panel,#button1,#button2 {
        padding: 5px;
        text-align: center;
        background-color: #dd67ff;
        border: 2px solid #2e4a8b;
    }
    #panel{
        display: none;
        padding: 40px;
    }
</style>
<script>
    $(document).ready(function(){
        $("#slide").click(function (){
            $("#panel").slideDown(1000)
        })
        $("#button1").click(function (){
            $("#panel").slideUp(1000)
        })
        $("#button2").click(function (){
            $("#panel").slideToggle(1000)
        })
    })

</script>
</head>
<body>
<div id="slide">出现</div>
<div id="button1" type="button">隐藏</div>
<div id="button2" type="button">toggle</div>
<div id="panel">hello world ！</div>
</body>

效果图：
在这里插入图片描述

三：jQuery尺寸：
CSS盒子模型：
在这里插入图片描述
width（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
height（）：设置或返回元素的宽度（不包括内边距，边框，外边距）

是在为难我大雄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训4.16

一：回顾上周知识jQuery动画效果:隐藏和显示，hide（），show（）。滑动： slidedown（），slideup（）。jQuery停止动画：stop()jquery-----链（chaining）。二：jQuery代码淡入淡出动画：show()：出现,hide()：隐藏,toggle()：来回滑动,slideUp(),slideDown(),slideToggle()代码...
复制链接

扫一扫