javascript - 使用 jQuery创建一个标签并淡出它

Question

我想img在 2 秒后淡出。现在我正在淡出我的input. 我在下面的代码中做错了什么？

$(ctrl)
 .closest("tr")
 .find("td:nth-child(2) input")
 .addClass("input-test")
 .after('<img id="input_img" src="http://i.imgur.com/2LGbUV2.png" />')
 .fadeOut(2000);

Answer 1

问题是因为after()返回选择器中的原始元素（在您的情况下td:nth-child(2) input），而不是创建的元素。

要解决这个问题，您需要附加 ，img以便您在 JS 代码中仍然可以引用它，然后可以调用fadeOut()它。试试这个：

var $input = $(ctrl).closest("tr").find("td:nth-child(2) input").addClass("input-test");
$('<img id="input_img" src="http://i.imgur.com/2LGbUV2.png" />').insertAfter($input).fadeOut(2000);

或者，您可以按当前状态追加，并单独选择新的 DOM 内容：

$(ctrl).closest("tr").find("td:nth-child(2) input").addClass("input-test").after('<img id="input_img" src="http://i.imgur.com/2LGbUV2.png" />');
$('#input_img').fadeOut(2000);

Answer 2

试试这个

$(ctrl).closest("tr").find("td:nth-child(2) input").addClass("input-test").after( '<img id="input_img" src="http://i.imgur.com/2LGbUV2.png" />' );
$(document).find("#input_img").fadeOut(2000)