jQuery实现画面的展开、收起和停止

现在位置：首页 > 编程语言 > web前端 > jQuery实现画面的展开、收起和停止

jQuery实现画面的展开、收起和停止

龙行 web前端 2018-11-13 1142 0评论

主要用到动画效果中的三个操作

("#id").slideDown(3000)； // 后面的数字表示效果的时长

("#id").stop();

("#id").slideUp(3000);

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展开和收起</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#contain").slideDown(3000);
        });
        $("#stop").click(function(){
            $("#contain").stop();
        });
        $("#pack-up").click(function(){
            $("#contain").slideUp(3000);
        });
    });
    </script>
     
    <style>
        
        html,body{
            margin: 0;
            padding: 0;
        }
        #main{
            width: 500px;
            margin: 0 auto;
        }
        #btn>button{
             border-radius: 4px;
             font-size: 16px;
             background: rgb(127, 28, 150);
             color: rgb(223, 219, 219);
             outline: none;
             margin: 10px 0;
        }

        #panel{
            width: 300px;
            color: #eee;
            font-family: cursive;
            text-align: center;
        }
       #title{
           background-color: rgb(105, 24, 180);
           font-size: 20px;
       }
        #contain{
         background-color:blueviolet; 
         padding: 20px auto;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="btn">
            <button id="flip">展开</button>
            <button id="stop">停止</button>
            <button id="pack-up">收起</button>
        </div>
        <div id="panel">
            <div id="title">初恋</div>
            <div id="contain">当初相遇苹果林，<br>
            你才挽起少女的发型。<br>
                前鬓插着如花的彩梳，<br>
                映衬着你的娟娟玉容。<br><br>
                
                你脉脉地伸出白净的手，<br>
                捧起苹果向我相赠。<br>
                淡红秋实溢清香啊！<br>
                正如你我的一片初衷。<br><br>
                
                我因痴情犹入梦境，<br>
                一声叹息把你的青丝拂动。<br>
                此时似饮合欢杯啊！<br>
                杯中斟满了你的恋情。<br><br>
                
                苹果林中树荫下，<br>
                何时有了弯弯的小径？<br>
                心中“宝塔”谁踏基？<br>
                耳边犹响着你的细语声声……<br><br>
            </div>
        </div>
    </div>
</body>
</html>