Question

我有一个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-wrapper文本对齐逻辑不变。我只想更改其动画效果，而不要更改按钮的位置。我需要在我的项目中这样做。

Answer 1

如果要立即将按钮设置在中间位置，则应将该按钮定位。 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()

Answer 2

使用此代码替换CSS文件

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

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

Answer 3

.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动画解决此问题会更好。

只需添加一个边框即可向您展示对齐方式。

更改放映中居中按钮的动画方向（持续时间）

3 个答案: