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时，它开始淡入并向右移动直到中间。当我使用toggle（“ explode”）隐藏它时，它会爆炸并向左移动！我希望它在不向左或向右移动的情况下显示并爆炸。我该怎么办？

Answer 1

爆炸动画必须以img为目标，而不是#golden_particlesDiv，因为如果使用相同的#golden_particlesDiv，爆炸动画将从#golden_particlesDiv开始的地方开始显示从身体的左侧开始。

您可以通过在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移开

1 个答案: