博客

python之show、hide、slidedonw、slideup方法实例

  • Post author:
  • Post category:python


一：show 、hide方法使用 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>
<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 显示
    function f1() {
        $('div').show(1000)
    }
    // 隐藏
    function f2() {
        $('div').hidden(1000)
    }
    // 切换、
    function f3() {
        $('div').toggle(1000)
    }
</script>
</body>
</html>

二、slidedown、slideUp用法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function () {

            $('#slideDown').click(function () {
              $('#content').slideDown(1000)
            });

            $('#slideUp').click(function () {
              $('#content').slideUp(1000)
            });

            $('#slidetaggle').click(function () {
              $('#content').slideToggle(1000)
            })
        })
    </script>
    <style>
        #content{
            text-align: center;
            background-color:lightblue;
            border: 1px solid red;
            /*display: none;*/
            padding: 30px;
        }
    </style>
</head>
<body>
<div id="slideDown">显示</div>
<div id="slideUp">隐藏</div>
<div id="slidetaggle">切换</div>
<div id="content">hello world</div>

</body>
</html>

三、fandein 、fandeout、fadetaggle、fadeto用法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function () {

            $('#in').click(function () {
              $('#id1').fadeIn(1000)
            });

            $('#out').click(function () {
              $('#id1').fadeOut(1000)
            });

            $('#fadetaggle').click(function () {
              $('#id1').fadeToggle(1000)
            });

            $('#fadeto').click(function () {
              $('#id1').fadeTo(1000,0.2)
            })
        })
    </script>
    <style>
        /*#content{*/
            /*text-align: center;*/
            /*background-color:lightblue;*/
            /*border: 1px solid red;*/
            /*!*display: none;*!*/
            /*padding: 30px;*/
        /*}*/
    </style>
</head>
<body>
<div id="in">fadein</div>
<div id="out">fadeout</div>
<div id="fadetaggle">切换</div>
<div id="fadeto">hello world</div>
<div id="id1" style="width: 80px; height: 100px;background-color: blue;"></div>
</body>
</html>


版权声明：本文为lichji2016原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。