jquery - 为什么 jQuerys 的 show 函数以这种方式工作？

Question

我只是在点击按钮时显示感谢信息。

JSfiddle

在此演示中，感谢消息来自左侧。

<div class='btn'></div>
<div class="thank-you">Thank You</div>

.btn {
    width:100px;
    height:100px;
    background-color: green;
    display:block;
}
.thank-you {
    padding-bottom: 20px;
    display: none;
    font-size: 25px;
    color: green;
    text-align: center;
}

$('.btn').on('click', function () {
    $('.thank-you').show('slow');
});

我的问题:

1. 为什么它是从左边来的？ (实际上它应该只显示像 fadeIn 这样的元素)

2. 如果可能，如何使用 show 函数从顶部显示感谢消息。 (没有动画功能)

更新 - 是否可以使用时间和高度属性或其他方式从顶部显示感谢信息(看起来是动画)。

Answer 1

问题一:为什么会这样动画？

它动画化的原因是因为您指定了 slow 并且文本居中。随着宽度的变化，它似乎会滑入。

使用 slow 意味着您想要动画，因此它会为所有它认为应该满足您的目标(宽度、高度、边距等)的东西设置动画。

例如这将只显示它 http://jsfiddle.net/TrueBlueAussie/d6w2nq99/16/ :

$('.btn').on('click', function(){
    $('.thank-you').show();
});

我个人的偏好是淡入。例如http://jsfiddle.net/TrueBlueAussie/d6w2nq99/28/

$('.btn').on('click', function(){
    $('.thank-you').fadeIn();
});

问题 2(已更新):如何从顶部向下设置动画

至于你的第二个问题，这个位置完全取决于你的造型。你可以把它放在任何地方。

尝试动画顶部位置(绝对位置元素):http://jsfiddle.net/TrueBlueAussie/d6w2nq99/30/

$('.thank-you').hide();
$('.btn').on('click', function(){
    $('.thank-you').show().animate({'top': 0});
});

注意:感谢的初始样式在屏幕外(负顶部位置)。