jQuery用淡入淡出效果改變身體的背景URL

我給了身體一個類.wrapbgone，我在X秒後將類切換到.wrapbgtwo。jQuery用淡入淡出效果改變身體的背景URL

我希望切換出現淡入淡出效果。

這是我的CSS：

.wrapbgone{background:url('http://placehold.it/500x500/915');height:100%;} 
.wrapbgtwo{background:url('http://placehold.it/500x500/400');height:1580px;}

這裏是例子：http://jsbin.com/ebemez/4/edit

來源

2012-01-05 jQuerybeast

因爲您正在交換課程，所以無法褪色到我所知的最佳狀態（您可以循環背景顏色 - 請參閱http://www.made-by-mike.co.uk的標題），但不能顯示圖像。

我能想到的最好的解決方法是窩在你的文檔的根二級絕對定位的div（您的內容DIV前）：

<body> 
    <div id="bgone">&nbsp;</div> 
    <div id="bgtwo">&nbsp;</div> 
    <div id="content"> 
     ... 
    </div> 
</body>

然後在比其他使用jQuery褪色一個：

$(document).ready(function() { 
    $('#bgtwo').fadeTo(0,0); // or set opacity to 0 in CSS to prevent div appearing then disappearing on page load 
    $('#bgtwo').fadeTo(500, 1, function(){ 
     $('#bgone').remove(); // replace remove() with fadeTo(500,0) if you don't want to remove it from the page altogether 
    }) 
});

來源

2012-01-05 10:15:09 MassivePenguin

你將不能夠做到這一點使用對身體類的背景圖像的CSS屬性。

您需要爲第二個背景圖像和頁面內容的容器創建一個容器，將它們放在彼此之上，然後您可以淡入淡出背景容器，以便圖像會交叉淡入/淡出原始圖像身體背景圖像。

來源

2012-01-05 10:10:03 bardiir

我認爲你正在尋找的是內置到jQueryUI的核心。它是一個名爲switchClass的函數（基本上可以很容易地稱爲animateClass）。這很棒;促進基於當前和未來類的元素的平滑動畫（自動魔術般地移除/添加這些類），並支持緩和轉換，轉換時間和回調fxn。希望它有幫助，我用它來轉換我的網站上的我的畫廊菜單。

來源

2012-02-05 08:00:00 Justin

jQuery用淡入淡出效果改變身體的背景URL

回答

相關問題