Question

我正在使用Web View在visual studio中构建一个Windows Phone应用程序。

单击按钮，我删除页面上的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();
    });
}

Answer 1

你正在寻找这个吗？ http://jsfiddle.net/nva1LLzh/4/

通过fadeOut()

中的maxCanSave()回调函数实现

Answer 2

Andrew 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。我把它搞砸了，但希望它足以说明我所得到的东西。

Answer 3

您的更新小提琴： FIDDLE

您可以添加一个具有初始背景的新虚拟容器，并将其淡出以显示新的背景，如下所示：

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

当我fadeIn（）容器Jquery时如何停止白色背景

3 个答案: