追加された要素をフェードイン

Question

ある間隔でいくつかの要素にDOMを追加していますが、フェードインしたいのですが、最初に表示されて消えてしまい、その後にフェードインするだけです。

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

これをどのようにスムーズに行う必要がありますか？

Answer 1

まず、JSとjQueryのネイティブメソッドが混在しているようです。私はできるだけ多くのものを貼っておくことをお勧めします。 $(el)でfadeIn()を呼び出していて、DOMに追加されたコンテンツではないことにも注意してください。 elementsToAppend()がDOMElementsでの配列を返すことを仮定

、あなたは、単一のjQueryのセレクタでそれらのすべてを置くことができ、あなたが追加した後fadeIn()を呼び出す前に、それらの上にhide()を呼び出します。これを試してみてください：

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