Jquery切换效果不起作用
[英]Jquery toggle effect not working
问题描述
所以基本上我有一个div，我想制作某种动画，首先我尝试切换div然后使用.remove（）jquery函数从DOM中完全删除div。 但我现在遇到的问题是切换效果没有发生，它只是直接进入remove（）代码。 我试图延迟代码，但同样的事情发生了。 有人可以帮我理解为什么我的代码表现得那样吗？ 请运行下面的代码片段，您会注意到没有切换效果。
function remv(){ $(".myDiv").toggle( "clip" ); $(".myDiv").remove(); alert('PORTUGAL IS GOIN TO WIN THE WORLD CUP AND CANT DO NOTHING ABOUT IT!'); document.getElementById("test").innerHTML="Portugal will be winner of the fifa world cup 2018"; }
.myDiv{ height:100px; width:100px; background-color: orange; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </head> <body> <div class="container"> <center><h3><p id="test">Click on the surprise box</p></h3></center> <center> <div class="myDiv" onclick="remv()"></div><br> </center> </div> </body> </html>
3 个解决方案
解决方案1
2 2018-06-24 21:26:35
那这个呢？
function remv() { $(".myDiv").toggle( "clip", function() { $(".myDiv").remove(); alert('PORTUGAL IS GOIN TO WIN THE WORLD CUP AND CANT DO NOTHING ABOUT IT!'); document.getElementById("test").innerHTML="Winner of the fifa world cup 2018"; $( "#dialog" ).dialog(); } ); }
.myDiv{ height:100px; width:100px; background-color: orange; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </head> <body> <div class="container"> <center><h3><p id="test">Click on the surprise box</p></h3></center> <center> <div id="dialog" > <img src="https://i.gifer.com/JgI9.gif" alt="Placeholder Image" /> </div> <div class="myDiv" onclick="remv()"></div><br> </center> </div> <script> $( "#dialog" ).hide(); </script> </body> </html>
解决方案2
1 已采纳 2018-06-24 21:27:06
您需要在.toggle()的“完整”回调中调用.remove() ，以便等待动画完成。
$(".myDiv").toggle("clip", function() {
$(".myDiv").remove();
});
文档： http ： //api.jquery.com/toggle/
解决方案3
0 2018-06-24 21:33:18
function remv(){ $(".myDiv").toggle( "clip" ); $(".myDiv").remove(); alert('PORTUGAL IS GOIN TO WIN THE WORLD CUP AND CANT DO NOTHING ABOUT IT!'); document.getElementById("test").innerHTML="Portugal will be winner of the fifa world cup 2018"; }
.myDiv{ height:100px; width:100px; background-color: orange; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </head> <body> <div class="container"> <center><h3><p id="test">Click on the surprise box</p></h3></center> <center> <div class="myDiv" onclick="remv()"></div><br> </center> </div> </body> </html>
jQuery-切换效果不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.