jQuery slideDown и slideUp НЕ анимируются - PullRequest
1 голос
/ 19 сентября 2019

Я не могу объяснить, почему мои 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.

1 Ответ

1 голос
/ 19 сентября 2019

Таблицы могут быть разборчивы, и вы не должны использовать какие-либо эффекты анимации непосредственно на столе.Но это прекрасно работает, если вы упакуете таблицу в div и используете slideUp() и slideDown() в div.

Вот обновленная версия вашего jsFiddle .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...