创建一个 <img> 标签并用 jQuery 淡出它

Question

我想在 2 秒后使 img 淡出。现在我正在淡出我的 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() returns select 或（在您的情况下 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);

或者您可以像现在一样追加，select 新的 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)

创建一个 <img> 标签并用 jQuery 淡出它

Create an <img> tag and fadeOut it with jQuery

html

javascript

jquery

fadeout

jquery-after