JQuery animation fallback doesn't work properly

Question

This is my HTML JQuery page, I've made a button that should open a div with slideToggle and after that run a callback function to show an alert. But the problem is, when div element is not closed totally, The window shows. You can see when a part of divider still exists, Some alert shows.

<!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>

Answer 1

Copy this code and try

  <!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>

JQuery animation fallback doesn't work properly

Question

1 answers

solution1
0 ACCPTED

JQuery animation fallback doesn't work properly

Question

1 answers

solution1 0 ACCPTED

solution1
0 ACCPTED