Question

我创建了一个将文本添加到名为#textBox的元素的函数。我希望文本在框中淡出，这是我的代码。

var addText_3 = function(text) {
    $("#textBox").append("<p><i>" + text + "</i></p>").hide().fadeIn(500);
};

所以，我的函数附加到文本并隐藏它以便它可以淡入。但是，我只是希望附加的元素淡入。当我尝试这个函数时，元素中的所有其他文本也会淡出。有没有办法只使我追加的元素淡入？

Answer 1

$("<p><i>" + text + "</i></p>").appendTo("#textbox").hide().fadeIn(500);

创建新元素，将其附加到#textbox，然后将其淡入。

＆＃13;

var text = 'Stack Overflow';
$("<p><i>" + text + "</i></p>").appendTo("#textbox").hide().fadeIn(500);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="textbox">Some text</div>

＆＃13;

Answer 2

函数的链接不会返回您期望的内容：当您认为它将返回新创建的文本节点时，它会返回#textBox。

因此，您必须同时调用文本节点上的hide()和fadeIn()函数。 appendTo()是您在返回调用者时使用的函数（在新节点上调用它）。

示例（使用jQuery创建干净节点）：

var addText_3 = function(text) {
     var text_node = $("<p>").append($("<i>", {html: text})).hide(); //Can use text instead of html
     text_node.appendTo("#textBox").fadeIn(500);
};

Answer 3

这是我个人的首选

DEMO

  var text = 'asdfasdfasdf';
  $("<p><i>" + text + "</i></p>").fadeIn(500).appendTo($('#textBox'));

Javascript .append（）与.fadein（）

3 个答案: