Fade in appended element

Question

I am appending DOM to some element in an interval, I want it to fade in, but it seems that it first apears, then disappears, and only then fade in is run.

var el = document.getElementById('cont');
el.innerHTML = '';
var toAppend = getElementsToAppend();
$(el).hide().append(toAppend).fadeIn(300);

How should I do this smoothly?

Can you give the `toAppend` a `display:none;` before you append it, then fade it in? — nurdyguy, Jan 12 '17 at 16:38
Try to add `display: none;' to the `#cont` element instead of hiding it from jQuery. — VladNeacsu, Jan 12 '17 at 16:38

score 1 · Answer 1 · answered Jan 12 '17 at 16:46

Firstly you seem to have an mix of native JS and jQuery methods. I'd suggest sticking with one or the other as much as possible. Also note that you're calling fadeIn() on the $(el), not on the content that was appended to the DOM.

Presuming that elementsToAppend() returns an array of DOMElements, you can put them all in a single jQuery selector and call hide() on them, before you call fadeIn() after appending. Try this:

var $toAppend = $(getElementsToAppend()).hide();
$('#cont').empty().append($toAppend);
$toAppend.fadeIn(300);

Fade in appended element

1 Answers1