Question

我想在2秒后制作img fadeOut。现在我正逐渐淡出我的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)

创建一个<img/>标记并使用jQuery淡出它

2 个答案: