使用jQuery创建一个<img>标签并实现淡出效果

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);

- raduken

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);

- Rory McCrossan

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)

- Rahul Patel

---

ељУдљ†еПѓдї•дљњзФ®$('#id')жЧґпЉМ$(document).find('#id')дЉЉдєОжЬЙзВєжµ™иієгАВ - Rory McCrossan

我不确定它能否找到这个动态生成的 img 标签。 - Rahul Patel