jquery fadein() with movement

Question

The following is the code that control two layers which are textlayer and text. After textlayer display then the text display,

<div id="textlayer" style="width:500px; height:500px; background-color:#FFFFFF;filter:alpha(opacity=70);opacity:0.8; position:absolute;left:250;top:150;display:none;">
    <div id="text" style="display:none; padding-top:300px">
    </div>
</div>

    function div2() {
        for (i=0;i<displaymax;i++) {
        $('#span'+i).fadeOut('slow');
        }
        $('#textlayer').fadeIn('slow', function () {
            $('#text').fadeIn(3000);
        });
    }

but i want that the text $('#text') fadein with movement that is from bottom to the top, how do i add the animation to the above code?

Answer 1

Is this the effect you are looking for?

http://jsfiddle.net/5agg2/

Without the colors, of course. It fades in the main div, then fades and moves from bottom to top the text div.

Script

$('#textlayer').fadeIn('slow', function () {
   $('#text').animate({'opacity': 'show', 'paddingTop': 0}, 2000);
});

Markup

<div id="textlayer" style="width:500px; height:500px; background-color:#00FFFF;filter:alpha(opacity=70);opacity:0.8;position:absolute;left:250;top:150;display:none;overflow:hidden;">
    <div id="text" style="display:none; background-color:Red; padding-top:900px">
        Test Text
    </div>
</div>

NOTE: I added padding-top:900px to the markup for the text div to move it outside of the containing div and I also added overflow:hidden; to the container.

Answer 2

get rid of fadeIn, just use animate

$('#text').animate({'opacity': 'show', 'paddingTop': 0});