Javascript AppendTo Анимация не работает

Question

Я перемещаю дочерние divs от одного родителя к другому с помощью appendTo. Вот то, что часть функций:

$('#forum_holder_hidden').children().slice(0,5).appendTo("#forum_holder").fadeIn(8000); 

Это HTML выход из двух дивы:

echo '<div id="outside-one">'; 
    echo '<div class="inside" id="1"></div>'; 
    echo '<div class="inside" id="2"></div>'; 
    echo '<div class="inside" id="3"></div>'; 
    echo '<div class="inside" id="4"></div>'; 
    echo '<div class="inside" id="5"></div>'; 
    echo '<div class="inside" id="6"></div>'; 
    echo '<div class="inside" id="7"></div>'; 
    echo '<div class="inside" id="8"></div>'; 
    echo '<div class="inside" id="9"></div>'; 
    echo '<div class="inside" id="10"></div>'; 
echo '</div>'; 

echo '<div id="outside-two">'; 
    echo '<div class="inside" id="11"></div>'; 
    echo '<div class="inside" id="12"></div>'; 
    echo '<div class="inside" id="13"></div>'; 
    echo '<div class="inside" id="14"></div>'; 
    echo '<div class="inside" id="15"></div>'; 
    echo '<div class="inside" id="16"></div>'; 
    echo '<div class="inside" id="17"></div>'; 
    echo '<div class="inside" id="18"></div>'; 
    echo '<div class="inside" id="19"></div>'; 
    echo '<div class="inside" id="20"></div>'; 
echo '</div>'; 

второго родителя (ID = внешний-два) имеет дисплей CSS свойство: нет. Я перемещаю дочерние divs от второго родителя к первому, чтобы отобразить их, когда пользователь прокручивается в нижней части страницы.

Не имеет значения, какая продолжительность или какая анимация я использую в конце, она все равно ничего не изменит. Я делаю что-то неправильно здесь или не работает анимация вообще, когда я использую appendTo?

Answer 1

Ваша проблема в том, что для любой «появляющейся» анимации элемент должен быть display:none до начала анимации. Попробуйте установить это перед запуском анимации.

$('#forum_holder_hidden').children().slice(0,5).appendTo("#forum_holder").css('display','none').fadeIn(8000);