Jquery Fadein() With Movement

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

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.

Solution 2:

get rid of fadeIn, just use animate

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

Share