JQuery .show () и .explode () отодвигают DIV - PullRequest
Новая
       6

JQuery .show () и .explode () отодвигают DIV

1 голос
/ 09 июня 2019

Я пытаюсь использовать функции show () и toggle () на некоторых div. 

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

Когда я показываю div с помощью функции .show, он начинает постепенно исчезать и перемещаться вправо до центра. И когда я прячу его с помощью переключателя («взорваться»), он взрывается и движется влево! Я хочу, чтобы он появился и взорвался, не двигаясь ни влево, ни вправо. Как я могу это сделать?

1 Ответ

1 голос
/ 09 июня 2019

Вы должны нацелиться на 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...