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アニメーションのフォールバックが正しく機能しない

答えて

関連する問題