jquery - 将元素定位在视口(viewport)之外，然后将其插入

Question

我想要什么:

当页面加载时，无论视口(viewport)的大小有多大，该元素都应该是不可见的。经过一定时间后，我希望元素飞进来。

到目前为止我所拥有的: 此代码(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 );​

问题:

实际上，这段代码存在不止一个问题。

• 它不适用于小窗口尺寸(请参阅 fiddle )，为什么？
• 当元素飞入后调整窗口大小时，margin-left 当然不是新窗口大小的 10%。有解决办法吗？应用 .css("margin-left","10%"); 似乎有点多余。也许有 resize(); 的东西？

我非常感谢任何形式的帮助!

​

Answer 1

为什么不绝对定位元素:

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

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

DEMO