需要窗口調整大小幫助。更改div位置（而不是動畫）

我不確定這裏有什麼正確的解決方案。我使用了搜索功能和谷歌，但我仍然需要一些建議。需要窗口調整大小幫助。更改div位置（而不是動畫）

我有幾個div在window.load中進行動畫處理。例如：

var showreel = $('#plbg');    
showreel.delay(1500).animate({ 
right: $(window).width()/2 - showreel.outerWidth()/2}, 500, 'swing');

所以這個動畫的DIV在屏幕的中央。現在當我調整窗口大小時，它不會動態調整中心位置。

我又寫了幾行字，就像這樣：

$(window).resize(function() { 
var showreel = $('#plbg');    
showreel.delay(1500).animate({ 
right: $(window).width()/2 - showreel.outerWidth()/2}, 500, 'swing'); 
});

我得到它的動畫工作，但我只是想的div移動到新位置沒有動畫。但也許最好使用不同的解決方案？

有人請給我一些建議嗎？

謝謝！

編輯：關閉我想，謝謝大家！ http://jsfiddle.net/jruddell/bV8qp/2/

來源

2012-07-16 philiph

你爲什麼使用jQuery來居中？ – dezman 2012-07-16 16:14:55

更新：

原來我最初的想法完全不是那麼回事，和正確的答案是使用的絕對和相對定位的組合。你似乎已經知道了這一點，但我正在糾正我的答案，以利於他人。

由於無法設置頁邊距的「自動」值，所以您仍然需要使用絕對定位將頁面加載中的div設置爲中心，就像您在原始代碼中所做的那樣。但是，一旦div到達頁面中心，您可以將其樣式更改爲相對定位，並使用自動邊距使其在窗口大小調整時保持居中。

與其直接在元素上設置CSS，我建議在兩個不同的類之間切換，一個用於「動畫」狀態，另一個用於「居中」狀態。通過這種方式，您可以向元素添加其他樣式，而無需更改動畫代碼。然而，爲了做到這一點，一旦完成動畫的直接CSS修改，你需要確保撤銷動畫的直接CSS修改，否則直接設置在元素上的絕對定位屬性會覆蓋樣式表設置的相對定位屬性。

所以，在你的頁面的CSS，你可以定義兩個類是這樣的：

.fly-in { 
    position:absolute; 
    left:0px; 
} 
.center { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
}

然後在你的window.load功能，或任何你想做的動畫，你可以有這樣的代碼：

var showreel = $('#plbg'); 
showreel.addClass("fly-in"); 
showreel.delay(1500).animate({ 
    left: ($(window).width() - showreel.width())/2 + "px" 
}, 500, 'swing', function() { 
    showreel.removeClass("fly-in").addClass("center"); 
    //Clear the "left" property that animate set directly on the div 
    showreel.css('left',''); 
});

這臺DIV運行動畫之前使用絕對定位，然後運行與將它設置爲相對定位在動畫完成時的回調函數（的最後一個參數animate）動畫。

來源

2012-07-16 17:10:34 Edward

它現在飛入。但是當動畫完成時，div將自己設置在屏幕的右側。請參閱：http://studio1984.nl/test。html 任何解決方案如何解決這個問題？謝謝！ – philiph 2012-07-18 16:42:01

嗯，這很奇怪，我的代碼在JSFiddle中工作：jsfiddle.net/PPTMH/4。我會研究這個。 – Edward 2012-07-18 17:58:42

@philiph好的，我想我修好了。問題是你需要在動畫結束後清除「left」屬性，否則它仍然會使用絕對定位。不幸的是，JSFiddle實際上並不能很好地測試它，因爲它不能很好地處理自動邊距。如果你創建一個帶有自動邊距的div並且根本沒有JavaScript，那麼div不會居中在預覽窗口中。 – Edward 2012-07-18 18:14:57

使用.center {position: relative; margin-left: auto; margin-right: auto; }

來源

2012-07-16 16:13:47 dezman

需要窗口調整大小幫助。更改div位置（而不是動畫）

回答

相關問題