Блог

У меня есть div с несколькими абзацами, которые я хочу отобразить через .show () по запросу. В этом div есть другой div, содержащий кнопку. Для этого div установлено выравнивание текста по центру, так что моя кнопка находится в середине всего текста в абзацах.

При использовании show (1000) текст анимируется сверху вниз, именно так, как я этого хочу. Однако кнопка, вместо того, чтобы следовать этому поведению, скользит слева.

 $('.showme').show(1000);  

     .wrapper {
        text-align: center;
    }
    
    .button {
        position: absolute;
    }
    
    .showme {
      display: none;
      width: 400px;
    }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showme">
    <p>
        Text
    </p>
    <p>
        More Text
    </p>
    <div class="wrapper">
        <button class="button">Hello</button>
    </div>
</div>  

Вы можете увидеть поведение в этом JSFiddle

Я хочу, чтобы кнопка сразу же оказалась посередине и скользила вниз вместе с абзацами. Как бы этого добиться?

РЕДАКТИРОВАТЬ: … сохраняя логику выравнивания текста Div-оболочки в том виде, в каком она есть в настоящее время. Я только хочу изменить способ анимации, а не то, как расположена кнопка. Мне нужно сделать это таким образом в моем проекте.

Если вы хотите сразу установить кнопку в середину, вам следует расположить эту кнопку. JSFiddle

 .wrapper {
  text-align: center;
  position: relative;
}
.button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
  

Редактировать:

Если вы хотите сохранить стили div.wrapper без изменений, но вы можете удалить position: absolute; из кнопки, вы можете попробовать использовать $('.showme').slideDown(1000); — JSFiddle

Если вы хотите сохранить стили div.wrapper без изменений, а также создать свою собственную анимацию, вам следует .addClass("nameClass") использовать свои собственные стили и не использовать .show()

Замените ваш CSS-файл этим кодом

  .wrapper {
    position: relative;
}
.button {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

.showme {
  display: none;
  width: 400px;
}
  

 .wrapper {
    text-align: center;
}

.showme {
  display: none;
  width: 400px;
  border: 1px solid black;
  text-align: center;
}
  

Это делает свое дело. Вам не нужен весь остальной HTML.
http://jsfiddle.net/zvj3axmf

Или вы можете сделать что-то вроде этого: http://jsfiddle.net/yjacu3bL Это исчезнет в кнопке под текстом после завершения первой анимации. Но было бы лучше, если бы вы решили это с помощью css-анимации.

Просто добавил рамку, чтобы показать вам, как это выравнивается.