Search code examples
javascriptjqueryhtmlfadeoutjquery-after

Create an <img> tag and fadeOut it with jQuery

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

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