Slide DIV from right of window

Question

I have a div that i need to slide out from the right on page load and stay locked on the right side of the window. It would be great if it could delay for about 5 seconds and then slide out

<script type="text/javascript">
    $("#slide").animate({width: 'toggle'}, 500);
</script>

html

<div id="slide"><img src="live.jpg"></div>

What am i missing?

Answer 1

You could try a couple of options.

If you want to use .animate(), you'll want to change the position from it's initial state. So in your CSS, you'll want to set the initial state of your div to something that is off of the page, like

#slide {
  position: absolute;
  right: 999em;
}

With this set, adding .animate() will animate the property you specify toward the value you specify, so specify where you want your div to end up after the animation completes.

$("#slide").delay(5000).animate({right: 0}, 500);

An alternative would be to use the jQuery addClass() method. If you do this, you'll want to define two classes in your stylesheet. The first class will be your div's initial state, again, positioned offscreen; the second class will be where your div ends up. For the animation, just use a CSS animation like this:

.div-start {
  position: absolute;
  right: 999em;
  transition: right 4s ease-in;
  -webkit-transition: right 4s ease-in;
  -moz-transition: right 4s ease-in;
}

.div-animate {
  right: 0;
}

Then in your jQuery, do this:

$('yourDiv').addClass("div-animate");

Edit: You could also use setTimeout on this to have it fire after 5 seconds, like so: setTimeout(function() { $('yourDiv').addClass("div-animate"); }, 5000);

Answer 2

$(document).ready(function(){
    $('#slide').delay(5000).animate({"width":"20%"}, 0500);
});

This will delay your animation by 5 seconds from when the pages has fully loaded, and then slide the content out to a width of 20%. Here is an example: http://jsfiddle.net/EdjjH/

Answer 3

$(document).ready(function(){
    $("#slide").delay(5000);
    $("#slide").animate({
        width: '500px',
        height: '500px',
    });
});

Here is the fiddle: jsfiddle This fiddle has a 5 second delay so be patient when looking at it.