所以基本上我有一个div,我想用它制作某种动画,首先我尝试切换div,然后使用.remove()jquery函数将div从DOM中完全删除。但是我现在遇到的问题是切换效果没有发生,它只是直接转到remove()代码。我试图延迟代码,但发生了同样的事情。有人可以帮助我了解我的代码为什么会这样吗?请运行下面的代码片段,您会发现没有切换效果。
$str_policy_details .= '<img itemprop="image" src="data:image/jpeg;base64,' . base64_encode($broker_details->BrokerImage) . '"/>';
//-------------------------------------------------------------------------^^^-------------------------------------------^^^^
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;
}
答案 0 :(得分:2)
那呢?
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>
答案 1 :(得分:1)
您将需要在.remove()
的“完成”回调中调用.toggle()
,以便它将等待动画完成。
$(".myDiv").toggle("clip", function() {
$(".myDiv").remove();
});
答案 2 :(得分:0)
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>