Question

这是我的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>

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

JQuery动画回退无法正常工作

1 个答案: