我有一个包含一些段落的 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 文本对齐逻辑。我只想改变它的动画方式,而不是按钮的定位方式。我需要在我的元素中这样做。
最佳答案
如果你想立即将按钮设置到中间,你应该定位那个按钮。 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( )
关于javascript - 更改显示中居中按钮的动画方向(持续时间),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55140221/