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

最新推荐文章于 2024-12-18 09:28:30 发布

原创最新推荐文章于 2024-12-18 09:28:30 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

Pyhon 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了使用jQuery实现的四种常见动画效果：显示、隐藏、滑动和平滑淡入淡出。通过实例展示了show、hide、toggle、slideDown、slideUp、slideToggle、fadeIn、fadeOut、fadeToggle和fadeTo的方法用法。

一：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>