jQuery切换效果不起作用

时间:2018-06-24 21:04:25

标签: javascript jquery html jquery-ui

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

}

3 个答案:

答案 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();
});

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

答案 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>