Question

What I want:

When the page loads, the element should be invisible, no matter how big the size of the viewport is. After a certain amount of time, I want the element to fly in.

What I have so far:
This code (http://jsfiddle.net/LdfZw/1/):

HTML

<div id="div1">
    <p>Lorem ipsum</p>
</div>​

CSS

#div1 {
    margin-left: 10%;
}

jQuery

var  tenPercent = $( window ).width()*0.1;

$('#div1').css('margin-left',-tenPercent);

setTimeout(function() {
    $ ('#div1').animate({marginLeft : tenPercent},1000 );
    }, 1000 );​

The problem:

Actually, there is more than one problem with this code.

• It’s not working with small window sizes (see fiddle), why?
• When the window is resized after the element flew in, the margin-left is of course not 10% of the new window size. Is there a solution for it? Applying .css("margin-left","10%"); seems a bit redundant. Maybe something with resize();?

I would really appreciate any form of help!

​

Answer 1

why not positioning the element absolutely:

#div1 {
    left: -20%;
    position: absolute
}

setTimeout(function() {
    $('#div1').animate({left : 0},1000 );
}, 1000 );

DEMO