定位元素，然後推動它在

Question

我想要什麼：

頁面加載後，該元素應該是不可見的，無論視口的尺寸有多大。一定時間後，我想要的元素在飛

我有什麼至今： 此代碼（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);​ 

問題：

其實，有一個以上的問題，此代碼。

• 它不適用於小窗口尺寸（請參閱小提琴），爲什麼？
• 當窗口在元素進入後調整大小時，左邊距當然不是新窗口大小的10％。有沒有解決方案？申請.css("margin-left","10%");似乎有點多餘。也許與resize();？

我真的很感激任何形式的幫助！

Answer 1

爲什麼不是絕對定位的元素：

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

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

DEMO

Answer 2

你的做法似乎辦法複雜，這種影響很小。 您可能需要使用jQueryUI的滑動效應http://jsfiddle.net/nvEyc/

否則不JQuery的UI我會做這樣的：

http://jsfiddle.net/uGXb3/

作品與窗口調整由於使用％的值。

基本上它：

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

和

#div1 { 
    margin-left:-100%; 
}​