Slide div when page loads

Question

I need to create a function that will animate div sliding from the left when the page loads. It needs to delay the animation for about 5 seconds. The example can be seen at this link

http://www.exacttarget.com/blog/amazon-dash-the-skinny-on-this-stick/

just under the title there is a section with share count. I need to create a function that will slide the item that has all the numbers summarized. This is the one on the right with gray background.

Answer 1

Hey i am not Css expert but what the site people doing is bit from CSS as well.So i made this jsfiddle .This might help you .I am not sure this will be working in all browsers as so far.You can use jQuery as fall back for browsers who doesn't support CSS3 Transition The code i used is :

div
{
   width:100px;
   height:100px;
   background:red;
   transition-property: margin-left;
   transition-duration: 2s;
   -webkit-transition-property: margin-left; /* Safari */
   -webkit-transition-duration: 2s; /* Safari */
    margin-left:-100px;
}
div.active
{
   margin-left:0px;
}

The jQuery code is :

$(function(){

$(".mydiv").addClass("active");
console.log($(".mydiv"));

});

Fiddle

Answer 2

 $(document).ready(function () {
      $("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});

Answer 3

html

<div id="upper_div"></div>
<div id="slideBox"></div>

CSS

#upper_div{
    width:200px;
    height:50px;
    background-color:#E5E5E5;
    float:left;
}

#slideBox{
    width:50px;
    height:50px;
    background-color:#CCCCCC;
    float:left;
    display:none;
}

jQuery

$(document).ready(function () {
      $("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});

DEMO