Slide Element Up Into Page?

Question

I was wondering how I could slide up a banner at the bottom of my page that is hidden.

For instance:

• Page loads
• 3 seconds later, the banner slides up from bottom of page

I want to be able to do this without any scrollbars appearing (no change in page height) and without revealing the banner prior to it sliding up.

I looked at slideUp() and slideToggle(), but I couldn't find a way to make it work to my liking :-/

Here's what I originally tried:

$(document).ready(function() {
          $('.serverad').delay(3000).slideToggle('slow', function() {
            // Animation complete.
          });
    });

And the CSS was visiblity: hidden;

Answer 1

use a position:fixed on the banner ad, and animate the bottom attribute to 0 have the initial bottom attribute be the a negative of its height.

<style>
    .serverad
    {
         height:60px;
         position:fixed;
         left:0px;
         bottom:-60px;
    }
</style>    

<script>
    $(document).ready(function() {
              $('.serverad').delay(3000).animate({bottom:"0px"},600);
        });
</script>