jQuery動畫后備無法正常運行
[英]JQuery animation fallback doesn't work properly
問題描述
這是我的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>
1 個解決方案
解決方案1
0 已采納
復制此代碼，然后嘗試
<!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的幻燈片動畫無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.