JQuery動畫後備無法正常工作

這是我的HTML JQuery頁面，我製作了一個按鈕，應該用slideToggle打開div，然後運行回調函數以顯示警報。但問題是，當div元素未完全關閉時，窗口顯示。你可以看到分頻器的一部分仍然存在，一些警報顯示。JQuery動畫後備無法正常工作

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

來源

2016-07-23 Mohsen Nirouzad

我刪除「窗口」。但問題仍然存在:( –

它正在工作.. – ihemant360

它的工作原理，但不完全是當分頻器的隱藏。警報運行時，仍然有一部分的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> 
    <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>

來源

2016-07-23 05:13:18 ihemant360

完美！它運作良好！ –

JQuery動畫後備無法正常工作

回答

相關問題