是否可以在不删除行的情况下淡化文本？

Question

我的留言代码：

$("#message").html(data).fadeOut(6000);

所以我有一条通过PHP文件发送的消息。一切都很好，消息显示良好。虽然它有一个问题：当消息消失时，消息所在的行也消失了，然后我的所有代码都在这一行之上，移动了一点，我不想要它。

总而言之，我的主要问题是如何使消息消失，但不会消失代码所在的行？感谢。

如您所见，在 FIDDLE 中：https://jsfiddle.net/dwe6mdhy/1/ 首先我们有3行，当消息fadeOut时它会删除中间行。

Answer 1

使用.fadeTo()

$("#message").html("hello").fadeTo(6000, 0);

jsfiddle https://jsfiddle.net/dwe6mdhy/6/

Answer 2

使用jquery animate功能并动画opacity，如下所示，而非使用fadeOut。

$("#message").html("hello").animate({opacity:0}, 6000);

Answer 3

快速而肮脏。我只是设置一个静态高度。并应用fadeTo以避免删除该类。

<div id="message" style="height:15px;">

$("#message").html("hello").fadeTo(500,0);

https://jsfiddle.net/dwe6mdhy/1/#&togetherjs=rL9qlJpiSL

Answer 4

只需使用动画代替fadeOut

$("#message").html("hello").animate({opacity: 0}, 6000);

这里是小提琴https://jsfiddle.net/vorant/6y1w6arw/

在动画结束后fadeOut在元素上设置display: none。阅读停靠栏http://api.jquery.com/fadeout/