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