提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery案例4——jq动画、jq显示与隐藏（规定时间）滑动下拉slideDown，滑动上拉slideUp

jQuery案例动画 时间 显示 隐藏 滑动 jq
2023-09-14 09:13:44 时间

一、案例描述

一打开页面，内容缓慢出现。

二、案例效果演示

请添加图片描述

三、案例局部代码

css代码：

 <style>
   div {
         width: 300px;
         height: 300px;
         border: 1px solid red;
         display: none;
     }
     
     img {
         width: 100%;
         height: 100%;
     }
 </style>

html代码：

<div>
    <img src="./img/female.jpeg" alt="" />
</div>

js代码：

<script>
    $(function() {
        $('div').slideDown(3000);
        $('div').click(function() {
            $(this).slideUp(3000);
        });
    });
</script>

四、案例整体代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jQuery.min.js"></script>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: none;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div>
        <img src="./img/female.jpeg" alt="" />
    </div>
    <script>
        $(function() {
            $('div').slideDown(3000);
            $('div').click(function() {
                $(this).slideUp(3000);
            });
        });
    </script>
</body>

</html>

五、总结

slideDown()滑动下拉
slideUp()滑动上拉
参考：
https://www.w3school.com.cn/jquery/effect_slidedown.asp
https://www.w3school.com.cn/jquery/effect_slideup.asp

相关文章