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

一、案例描述

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

二、案例效果演示

三、案例局部代码 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>Documenttitle>
    <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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/944516.html

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

发表评论

评论列表（0条）