CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Dennis
Dennis

Reputation: 605

Javascript AppendTo Animation not working

I am moving child divs from one parent to the other using appendTo. Here is that part of the functions:

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

This is the html output of the two divs:

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>';

The second parent (id = outside-two ) has the css property display:none. I am moving the child divs from the second parent to the first one to display them when a user scrolls to the bottom of the page.

It doesn't matter what duration or what animation i use at the end it will still change nothing. Am i doing something wrong here or does the animation not work at all when i am using appendTo?

Upvotes: 2

Views: 71

Answers (1)

pablito.aven
pablito.aven

Reputation: 1165

Your problem is that for any "appearing" animation, the element must be display:none before the animation starts. Try setting that before you run the animation.

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

Upvotes: 1

Related Questions