Create an <img> tag and fadeOut it with jQuery

Question

I would like make the img fadeOut after 2 seconds. Right now I am fading out my input. What I am doing wrong in that code below?

$(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

The issue is because after() returns the original element in the selector (in your case td:nth-child(2) input), not the element which was created.

To fix this you need to append the img so that you still have a reference to it in the JS code and can then call fadeOut() on it. Try this:

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

Alternatively you can append as you currently are, and select the new DOM content separately:

$(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

Try this

$(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)