Getting page content via wrapper in WP to slide in

Question

I'm trying to have my Wordpress content, when visiting the homepage, navigating to the other pages - have the content slide down from the top subtly with jQuery on page load. Currently I have some code implemented which I think should work, but isn't. The transitions are ignored and only the text content within the defined wrapper does anything, and it what it does is just lag down 25px or so, and go back up, almost as how large page's sometimes load at slow connections. But this is not the issue with my page.

Here's what I have.

Right before closing </head> in header.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<script>

$(document).ready(function(){
    $("#wrapper").addClass("visible");
});

</script>

What I've done with the #wrapper, and all of it's styles.

#wrapper { 
    padding: 15px;
        background: #fff;
        -moz-box-shadow: inset 0 0 5px 5px #888;
        -webkit-box-shadow: inset 0 0 5px 5px#888;
        box-shadow: inset 0 0 5px 5px #888;
        border-radius: 5px; 
       -moz-border-radius: 5px; 
       -webkit-border-radius: 5px; 
        border: 1px solid #807A7C;
}

#wrapper {

    top: -20px;
    width: 540px;
    transition: top 0.5s;
    -moz-transition: top 0.5s;
    -webkit-transition: top 0.5s;
    -o-transition: top 0.5s;
}

#wrapper.visible {
    top: 0px;
}

What am I missing?

Answer 1

It might have to do with the way you're hiding the content. You might be better off just using jQuery to show the content with animation by getting rid of the "top" and transitions and instead doing

$(document).ready(function(){
    $("#wrapper").show("slow",function(){});
});