JQuery 动画回退无法正常工作答案

【问题标题】：JQuery animation fallback doesn't work properlyJQuery 动画回退无法正常工作
【发布时间】：2016-07-23 13:13:18
【问题描述】：

这是我的 HTML JQuery 页面，我制作了一个按钮，该按钮应该使用 slideToggle 打开一个 div，然后运行一个回调函数以显示警报。但问题是，当 div 元素没有完全关闭时，窗口显示。您可以看到分隔线的一部分何时仍然存在，一些警报显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<button type="button" class="w3-btn-block w3-teal w3-ripple">Show!</button>
<div class="w3-container w3-padding w3-black">
    <p>Aliqua e ut magna occaecat eu mandaremus concursionibus non expetendis, de 
    voluptate comprehenderit, lorem expetendis te minim irure. Legam vidisse sed 
    sint quem. Do summis a anim, et legam occaecat expetendis. Sint do te nisi 
    eiusmod quo nostrud ad irure vidisse, ubi ad dolore incididunt nam quis 
    cernantur sed litteris. Malis litteris est tractavissent ea do quorum deserunt 
    transferrem. Ea velit transferrem, laboris fore nostrud.</p>
</div>
<script>
    $(function(){
        $(':button').click(function(){
            $('div').slideToggle(1000,function(){
                window.alert('divider hid successfully!');
            });
        });
    });
</script>
</body>
</html>

【问题讨论】：

我删除了“窗口”。但问题仍然存在:(
它有效，但不完全是在分隔线隐藏时。当 div 的某些部分仍然打开时，警报就会运行。
从 div 中删除类 w3-padding w3-black
问题已解决，但不是答案。我选择了我所有的 div 元素，所以 JQuery 必须在我的所有分隔线隐藏后发出警报。
但你只有一个 div ... 制作具有相同 id 的 div 并以该 id 为目标进行隐藏。

标签： javascript jquery css html

【解决方案1】：

复制这段代码试试

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    </head>
    <body>
    <style>
    #mydiv{
    background-color:#000;
    color:#fff;
    }

    </style>

    <button type="button" class="w3-btn-block w3-teal w3-ripple">Show!</button>
    <div class="w3-container" id="mydiv">
        <p>Aliqua e ut magna occaecat eu mandaremus concursionibus non expetendis, de 
        voluptate comprehenderit, lorem expetendis te minim irure. Legam vidisse sed 
        sint quem. Do summis a anim, et legam occaecat expetendis. Sint do te nisi 
        eiusmod quo nostrud ad irure vidisse, ubi ad dolore incididunt nam quis 
        cernantur sed litteris. Malis litteris est tractavissent ea do quorum deserunt 
        transferrem. Ea velit transferrem, laboris fore nostrud.</p>
    </div>

    <hr>
    <div class="w3-container" id="mydiv">
    <h2> this is  Div1 </h2>
        <p>Aliqua e ut magna occaecat eu mandaremus concursionibus non expetendis, de 
        voluptate comprehenderit, lorem expetendis te minim irure. Legam vidisse sed 
        sint quem. Do summis a anim, et legam occaecat expetendis. Sint do te nisi 
        eiusmod quo nostrud ad irure vidisse, ubi ad dolore incididunt nam quis 
        cernantur sed litteris. Malis litteris est tractavissent ea do quorum deserunt 
        transferrem. Ea velit transferrem, laboris fore nostrud.</p>
    </div>
    <hr>
    <div class="w3-container" id="mydiv">
    <h2> this is  Div2 </h2>
        <p>Aliqua e ut magna occaecat eu mandaremus concursionibus non expetendis, de 
        voluptate comprehenderit, lorem expetendis te minim irure. Legam vidisse sed 
        sint quem. Do summis a anim, et legam occaecat expetendis. Sint do te nisi 
        eiusmod quo nostrud ad irure vidisse, ubi ad dolore incididunt nam quis 
        cernantur sed litteris. Malis litteris est tractavissent ea do quorum deserunt 
        transferrem. Ea velit transferrem, laboris fore nostrud.</p>
    </div>
    <hr>
    <div class="w3-container" id="mydiv">
    <h2> this is  Div3 </h2>
        <p>Aliqua e ut magna occaecat eu mandaremus concursionibus non expetendis, de 
        voluptate comprehenderit, lorem expetendis te minim irure. Legam vidisse sed 
        sint quem. Do summis a anim, et legam occaecat expetendis. Sint do te nisi 
        eiusmod quo nostrud ad irure vidisse, ubi ad dolore incididunt nam quis 
        cernantur sed litteris. Malis litteris est tractavissent ea do quorum deserunt 
        transferrem. Ea velit transferrem, laboris fore nostrud.</p>
    </div>

    <script>
        $(function(){
            $('button').click(function(){
                $('div').slideToggle('slow',function(){
                    alert("oye i am alert");
                });
            });


        });
    </script>
    </body>
    </html>

【讨论】：