Jquery切换效果不起作用
[英]Jquery toggle effect not working
问题描述
So basically I have a div which I would like to make some kind of animation with, first I tried to toggle the div then completely remove the div from the DOM using .remove() jquery function. 
所以基本上我有一个div，我想制作某种动画，首先我尝试切换div然后使用.remove（）jquery函数从DOM中完全删除div。 But the problem that I'm having right now is that the toggle effects is not taking place, it is just going straight to the remove() code. 但我现在遇到的问题是切换效果没有发生，它只是直接进入remove（）代码。 I tried to delayed the code but same thing happened. 我试图延迟代码，但同样的事情发生了。 Can someone help me to understand why my codes is behaving like that? 有人可以帮我理解为什么我的代码表现得那样吗？ Please run the snippet below you will notice that theres not toggle effect. 请运行下面的代码片段，您会注意到没有切换效果。
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
What about this? 那这个呢？
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
You will need to call .remove() in the 'complete' callback of .toggle() so it will wait for the animation to complete. 您需要在.toggle()的“完整”回调中调用.remove() ，以便等待动画完成。
$(".myDiv").toggle("clip", function() {
$(".myDiv").remove();
});
Documentation: http://api.jquery.com/toggle/ 文档： 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.