Me gustaría hacer que la imagen se img después de 2 segundos. En este momento estoy desvaneciendo mi input . ¿Qué estoy haciendo mal en ese código a continuación?
$(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);El problema es que after() devuelve el elemento original en el selector (en su caso, td:nth-child(2) input ), no el elemento que se creó.
Para solucionar esto, debe agregar el img para que aún tenga una referencia en el código JS y luego pueda llamar a fadeOut() en él. Prueba esto:
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);Alternativamente, puede agregar como está actualmente y seleccionar el nuevo contenido DOM por separado:
$(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);Prueba esto
$(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)