时间戳

首页 > 解决方案 > JQuery .show() and .explode() Move the DIV Away

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

问题描述

I'm trying to use the show() and toggle() function on certain divs.

<!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/

When I show a div using the .show function, it starts to fade in and move to the right till the center. And when I hide it using the toggle("explode"), it explodes and moves left! I want it to show up and explode without moving left or right. How can I do that?

标签： jqueryjquery-ui

解决方案

您必须针对爆炸动画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>

推荐阅读