Javascript AppendTo 动画不起作用

Question

我正在使用 appendTo 将子 div 从一个父级移动到另一个父级。这是功能的一部分:

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

这是两个 div 的 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 = outside-two) 具有 css 属性 display:none。我将子 div 从第二个父级移动到第一个，以便在用户滚动到页面底部时显示它们。

无论持续多长时间或最后使用什么动画，它都不会改变任何内容。 我是不是做错了什么，或者当我使用 appendTo 时动画根本不起作用？

Answer 1

您的问题是对于任何“出现”的动画，在动画开始之前元素必须是display:none。尝试在运行动画之前进行设置。

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