Mohsen Nirouzad Mohsen Nirouzad - 4 months ago 14
jQuery Question

JQuery animation fallback doesn't work properly

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

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