Javascript .append() with .fadein()

Javascript .append() with .fadein()

本文关键字：fadein with append Javascript      更新时间：2023-09-26

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

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

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

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

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

var text = 'Stack Overflow';
$("<p><i>" + text + "</i></p>").appendTo("#textbox").hide().fadeIn(500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="textbox">Some text</div>

函数的链接不会返回你期望的内容：它会返回#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);
};

这是我的个人偏好

演示

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