我只是在单击按钮时显示感谢消息。
在此演示中，感谢消息来自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）
如有可能，如何使用显示功能从顶部显示谢谢消息。（Without animation function）
更新-是否可以使用时间和高度属性或其他方式从顶部显示感谢消息（看起来很生气）。
问题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});
});
注意：“谢谢”的初始样式不在屏幕上（负位置）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句