Question

所以基本上我有一个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;

}

Answer 1

那呢？

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>

Answer 2

您将需要在.remove()的“完成”回调中调用.toggle()，以便它将等待动画完成。

$(".myDiv").toggle("clip", function() {
    $(".myDiv").remove();
});

文档：http://api.jquery.com/toggle/

Answer 3

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切换效果不起作用

3 个答案: