div容器的滑出效果-jquery

最新推荐文章于 2022-01-11 14:48:43 发布

milijiangjun

最新推荐文章于 2022-01-11 14:48:43 发布

阅读量928

点赞数

分类专栏： # JavaScript # html5

本文链接：https://blog.csdn.net/milijiangjun/article/details/79203266

版权

html5 同时被 2 个专栏收录

232 篇文章 4 订阅

订阅专栏

JavaScript

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div容器的滑出效果-jquery</title>
  
    <script type="text/javascript" src="Script/jquery-1.7.min.js" ></script>
    <style>
        *{margin: 0px;padding:0px;}
        /*为整体的容器*/
         #Nav{width: 300px;height: 300px;margin-top: 100px;border:1px solid red;}
        /*功能模块*/
        #Ner
        {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            top:-100px;
        }
       

    </style>
    <script type="text/javascript">
        //默认显示
        var CheckBtnStart = true;
        function Show() {

            $("div").animate({
                top: "0px"
            });


        }
        function hiden() {
            $("div").animate({
                top: "-100px"
            });
        }
        function SAndH()  {
            if(CheckBtnStart){
                alert("显示");
                Show();
                CheckBtnStart = false;

            }else{
                  alert("隐藏");
                  hiden();
                  CheckBtnStart = true;}
            
        }
    </script>
</head>
<body>
    <input type="button" value="点我滑出" οnclick="Show();">
    <input type="button" value="点我隐藏" οnclick="hiden();">
    <input type="button" value="显示隐藏" οnclick="SAndH();" >
    <div id="Nav" >
        <div id="Ner" ></div>
    </div>
</body>
</html>