當我fadeIn（）容器Jquery

如何停止白色背景我正在使用Web視圖在visual studio中構建一個Windows Phone應用程序。當我fadeIn（）容器Jquery

點擊一個按鈕，我刪除頁面上的html元素，創建新的元素，並更改容器元素的背景圖像。我使用fadeIn()方法淡化所有內容。但是，當容器淡入時，會出現白色背景。我試圖改變背景顏色，並且還設置了背景圖像，希望您能看到背景圖像，但它不起作用。

理想情況下，我想要的是一個新的背景無縫淡入。我想我可以讓身體背景和容器背景具有相同的圖像，然後隱藏容器，更改背景圖像，然後再次淡入。這似乎並不奏效。

的jsfiddle http://jsfiddle.net/nva1LLzh/2/

function startPage() { 
    //Add start button when game hasn't started 
    $('<div class="startButton">Start Saving</div>').hide().appendTo(".container").fadeIn(1000); 
    //$(".container").append('<div class="startButton">Start Saving</div>').fadeIn("slow"); 
    $(".startButton").click(function() { 
     $(".startButton").remove(); 
     maxCanSave(); 
    }); 
} 

function maxCanSave() { 
    $('.container').css('background-image', 'url(https://s-media-cache-ak0.pinimg.com/736x/fa/c3/d9/fac3d9517be53c025fbb494440369934.jpg)'); 
    $(".container").hide().fadeIn(2000); 
    $('<h1>How Much?</h1>').hide().appendTo(".container").fadeIn(2000); 
    $('<p>How much money do you want to save?</p>').hide().appendTo(".container").fadeIn(2000); 
    $('<input type="text" name="firstname" value="Enter Amount">').hide().appendTo(".container").fadeIn(2000); 
    $('<div class="startButton">Continue?</div>').hide().appendTo(".container").fadeIn(2000); 
    $(".startButton").click(function() { 
     $(".container").empty(); 
     showDate(); 
    }); 
}

來源

2015-11-05 Sean King

您更新小提琴：FIDDLE

您可以用初始背景添加一個新的虛擬容器和淡化它揭示了新的背景是這樣的：

<div class="container"> /* contains new background */ 
    <div class='dummy-container'></div> /* contains old background */ 
    ... 
</div>

來源

2015-11-05 09:59:37 Anubhav

謝謝親切的先生！並感謝所有人的幫助！ –

對不起，再次提起它，但我只是想知道如果你想這樣做不止一次，你會怎麼做呢？我希望能夠改變每個按鈕的背景，例如 - 但是，對於您的解決方案，它似乎只能使用一次，因爲我無法淡出容器，也不會褪色虛擬容器。你可以在這裏看到JSFiddle的意思。再次單擊按鈕後，我想更改showDate（）函數中的背景，但似乎不起作用。 http://jsfiddle.net/uwpwfm1f/1/ –

您正在尋找呢？ http://jsfiddle.net/nva1LLzh/4/

它在maxCanSave()

來源

2015-11-05 09:40:28

這正是我除了淡入淡出之間的白色背景之外，我會尋找它。有沒有辦法讓它直接淡入其他圖像 - 或者至少將背景顏色改爲黑色？我希望在淡出容器時，可以看到身體的背景圖像。 –

whis white blink是因爲圖像在'$（'。container''）行加載而引起的.css（'background-image'，'url（https://s-media-cache-ak0.pinimg.com/736x /fa/c3/d9/fac3d9517be53c025fbb494440369934.jpg）'）;'。你可以更好地用不同的圖像在CSS樣式中添加2個類，並在淡入淡出之間切換tham –

這是你的意思嗎？ http://jsfiddle.net/nva1LLzh/6/ 我仍然遇到同樣的問題。也許我沒有正確理解你？ –

安德魯EVT與回叫功能來實現已經回答了這一點，但另一種方法是獨立於容器類背景：

<div class ="bg-container"> 
    <div class="container">

而且在CSS中做這樣的事情：

.bg-container{ 
    width:100%; 
    height:100%; 
    background-size: cover; 
    background-image: url("https://s-media-cache-ak0.pinimg.com/736x/c0/10/40/c010401ca403a4e02aae87459bfb298e.jpg"); 
    background-repeat: no-repeat; }

這裏有一個工作example。我把它搞砸了，但是希望這足以說明我在做什麼。

來源

2015-11-05 09:47:48 Coss

當我fadeIn（）容器Jquery

回答

相關問題