slideDown div with text inside

Question

Fiddle

I am trying to slideDown a Div.

$('#rnotif').slideDown('slow');

The Div is sliding properly but the text content inside that looks fixed at one place.

How do i make this text to slide with the Div.

I have my div positioned absolute and i don't want to change that for some reason.

Answer 1

Here is my attempt... :) The styling has not been changed, only the top position was changed from 0 to -95 px.. so with animate({top:'0px'},"slow")

I "slide" the element to the original postion.. meaning at 0px.. This moves everything in the div is moved as one element. "like a box rather then separate items." therefore creating a slide down effect without affecting anything else :)

http://jsfiddle.net/cXdGL/3/

$('document').ready(function(){
    var html = "<div id='rnotif' style='background: #ffffcc;height: 70px;font-size: 25px;position: absolute;top: -95px;width: 100%;text-align: center;line-height: 70px;'>sliding down</div>";
    $('body').append(html);
    $("#rnotif").animate({top:'0px'},"slow")
});

Answer 2

You need to put the text into a another tag (b in this example, or another div) and set it to position:absolute; and bottom:0px; this re aligns it as the sliding is occurring. Hope this helps.

    $('document').ready(function(){
    var html = "<div id='rnotif' style='background: #ffffcc;height: 70px;font-size: 25px;position: absolute;top: 0px;width: 100%;line-height: 70px;'><b style='position:absolute;bottom:0px;text-align: center; width:100%'>sliding down</b></div>";
    $('body').append(html);
    $('#rnotif').hide();
    $('#rnotif').slideDown('slow');
});

JsFiddle: http://jsfiddle.net/8HgVm/2/