JQuery .show() 和 .explode() 将 DIV 移开

Question

我正在尝试在某些 div 上使用 show() 和 toggle() 函数。

<!DOCTYPE html>
        <html>
          <head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        </head>

        <body>

        <div style="width:100%; position:relative; top:10px; right:30px; color:white; font-size:40pt; line-height:1.5em;">
                <div style="display: table; position:absolute; top:0px; width:100%;">
                  <div id="golden_particlesDiv" style="display: table-cell; text-align:center; display:none;">
                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" style="width:322px; height:322px;">
                  </div>
                </div>
                </div>
        <script>
$(document).ready(function()
                  {
  $("#golden_particlesDiv").show(2000).toggle( "explode", {pieces: 25}, 1000 );
});
</script>
        </body>

        </html>

JSFiddle：https://jsfiddle.net/un0g5xmz/

当我使用 .show 函数显示 div 时，它开始淡入并向右移动到中心。当我使用切换 ("explode") 隐藏它时，它爆炸并向左移动！我希望它在不向左或向右移动的情况下出现并爆炸。我该怎么做？

Answer 1

对于爆炸动画，您必须将 img 而不是 #golden_particlesDiv 作为目标，因为如果您使用相同的 #golden_particlesDiv，爆炸动画将从 #golden_particlesDiv 开始开始显示哪个是 body.

的左边

您可以通过在 show 函数回调中切换动画来做到这一点，这样它将在 show 动画完成时触发：

$("#golden_particlesDiv").show(2000, function() {
    $(this).children('img').toggle( "explode", {pieces: 25}, 1000 );
});

示例如下：

$(document).ready(function() {
  $("#golden_particlesDiv").show(2000, function() {
      $(this).children('img').toggle( "explode", {pieces: 25}, 1000 );
  });
});

<!DOCTYPE html>
        <html>
          <head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        </head>
        
        <body>
        
        <div style="width:calc(100%); position:relative; top:10px; right:30px; color:white; font-size:40pt; line-height:1.5em;">
                <div style="display: table; position:absolute; top:0px; width:100%;">
                  <div id="golden_particlesDiv" style="display: table-cell; text-align:center; display:none;">
                    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" style="width:322px; height:322px;">
                  </div>
                </div>
                </div>
        
        </body>
        
        </html>

JQuery .show() 和 .explode() 将 DIV 移开

JQuery .show() and .explode() Move the DIV Away

jquery

jquery-ui