Positioning element outside viewport, then pushing it in
===

**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/][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!*

​


  [1]:http://jsfiddle.net/LdfZw/1/