个人中心
gpt4 book ai didi

javascript - jQuery slideDown 和 slideUp 不是动画

转载 作者：行者123 更新时间：2023-11-30 19:15:59 25 4
gpt4 key购买 nike

我无法解释为什么我的 slideUp 和 slideDown 不起作用。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>
    <div class="text-center">
        <button class="btn btn-lg btn-success" type="button" id="show">Show</button>
        <button class="btn btn-lg btn-danger" type="button" id="hide">Hide</button>
    </div>

    <br><br><br>

    <table class="table table-striped table-dark">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>

    <!-- EX1 -->
    <!-- $('#hide').on('click', function() { -->
    <!-- $('table').hide(); -->
    <!-- }); -->
    <!-- $('#show').on('click', function() { -->
    <!-- $('table').show(); -->
    <!-- }); -->
    <!-- EX2 -->
    <!-- $('#hide').on('click',function() { -->
    <!-- $('table').fadeOut(2000); -->
    <!-- }); -->
    <!-- $('#show').on('click',function() { -->
    <!-- $('table').fadeIn(2000); -->
    <!-- }); -->

    <script type="text/javascript">

        $('#hide').on('click', function() {
            $('.table').slideUp("slow", function(){
                console.log('%c -------->> hide clicked <<--------', "color: green;");
            });
        });

        $('#show').on('click', function() {
            $('.table').slideDown("slow", function(){
                console.log('%c -------->> show clicked <<--------', "color: green;");
            });

        });
    </script>
</body>

</html>

这里也可以重现

https://jsfiddle.net/bheng/gef1ntLq/

我几乎尝试了所有版本的 jQuery。

最佳答案

表格可能很挑剔，您不应该直接在表格上使用任何动画效果。但如果您将表格打包到一个 div 中并在该 div 上使用 slideUp() 和 slideDown()，它工作正常。

这是您的 jsFiddle 的更新版本.

关于javascript - jQuery slideDown 和 slideUp 不是动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58002223/

25 4 0
文章推荐： javascript - React useEffect 附加脚本未触发
文章推荐： c++ - c/c++ 中局部变量的作用域和生命周期的困惑
文章推荐： c# - 替代使用 if -else 语句
文章推荐： javascript - this.state 不会按预期更新
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com