JSfiddle

在此演示中，感谢您的消息来自left side。

<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');
});

我的问题：

为什么它来自左侧？（实际上它应该只显示像fadeIn）
如果可能的话，如何使用show function从顶层显示感谢信息。（Without animation function）

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

Answer 1

问题1：为什么它会像那样动画？

动画的原因是您指定了slow，文字是居中。随着宽度动画，它似乎滑入。

使用slow暗示您想要动画，因此它可以为您的目标设置动画（宽度，高度，边距等）。

例如，这只会显示http://jsfiddle.net/TrueBlueAussie/d6w2nq99/16/：

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

我个人的偏好是fadeIn。例如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});
});

注意：谢谢你的初始样式是屏幕外（负顶部位置）。

Answer 2

来自JQuery文档：

当提供持续时间，普通对象或“完整”功能时，.show（）成为动画方法。 .show（）方法同时动画匹配元素的宽度，高度和不透明度。 LINK

它以你看到的方式（从左到右）动画，因为这个函数是在JQuery核心中以这种方式创建的。

您无法“从顶部显示”，您可以在其所在的位置显示任何对象，或使用默认的左 - >右动画。如果要从顶部滑动它，可以使用slideDown（）等函数。

Answer 3

尝试使用.slideDown()，然后

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

DEMO

Answer 4

从display: none（CSS）中删除.thank-you并将您的jQuery更改为：

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

Fiddle

Answer 5

点击此处：

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

Answer 6

如果您希望元素从顶部滑动，那么您必须使用动画属性

Something like this

$('.btn').on('click', function(){
$('.thank-you').animate({ 
    top: "300px",
  }, 500 );
});

为什么jQuerys＆＃39;以这种方式显示功能？

JSfiddle

6 个答案:

DEMO

Fiddle