CODEWITHSUNDEEP
javascriptjquery
user2186701
user2186701

Reputation: 31

Slide div when page loads

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.

Upvotes: 1

Views: 6759

Answers (3)

Animesh
Animesh

Reputation: 1033

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

Upvotes: 0

surajRahel
surajRahel

Reputation: 266

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

Upvotes: 3

Elliot Fehr
Elliot Fehr

Reputation: 774

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

Upvotes: 0

Related Questions