淡入新背景按钮单击不能多次使用

Question

我尝试淡出当前背景，然后点击按钮淡入新背景。我目前只需按一下按钮就可以了，但之后我似乎无法正常工作。我也在Visual Studio for Windows phone的WebView中创建了这个。

我做错了什么？

＆＃13;

＆＃13;

$(function() {
  var gameState = false;
  var images = new Array();
  images[0] = new Image();
  images[0].src = '../../Assets/home2.jpg';


  startPage();

  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() {
    $(".dummy-container").fadeOut(1000);
    $(".container").fadeIn(1000, function() {
      $('.container').css('background-image', 'url(https://s-media-cache-ak0.pinimg.com/736x/fa/c3/d9/fac3d9517be53c025fbb494440369934.jpg)');

      $('<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();
      });
    });

  }

  function showDate() {
    $(".container").fadeIn(1000, function() {
      $('.container').css('background-image', 'https://s-media-cache-ak0.pinimg.com/736x/c0/10/40/c010401ca403a4e02aae87459bfb298e.jpg')
    });
    $(".container").append('<h1>You will have on:</h1>');
    $(".container").append('<p>21/02/1993</p>');
    $(".container").append('<div class="startButton">Yes That is fine.</div>');
    $(".container").append('<div class="startButton2">I cant afford that.</div>');

    $(".startButton2").click(function() {
      $(".container").empty();
      enterNewDate();
    });

    $(".startButton").click(function() {
      $(".container").empty();
      mainApp();
    });
  }

  function enterNewDate() {
    $(".container").append('<h1>What date do you need it by?</h1>');
    $(".container").append('<p>Enter the date that you need it by.</p>');
    $(".container").append('<input type="text" name="firstname" value="Enter Date">');
    $(".container").append('<div class="startButton">Continue</div>');
    $(".startButton").click(function() {
      $(".container").empty();
      youNeedToSave();
    });
  }

  function youNeedToSave() {
    $(".container").append('<h1>You Will need to save:</h1>');
    $(".container").append('<p>80 per week</p>');
    $(".container").append('<div class="startButton">Yes That is fine.</div>');
    $(".container").append('<div class="startButton2">I cant afford that.</div>');

    $(".startButton2").click(function() {
      $(".container").empty();
      enterNewDate();
    });

    $(".startButton").click(function() {
      $(".container").empty();
      mainApp();
    });
  }

  function mainApp() {
    $(".container").append('<h1>On Track!</h1>');
    $(".container").append('<p>+50</p>');
    $(".container").append('<p>22/02/2016</p>');
    $(".container").append('<div class="addMoney">AddMoney</div>');
    $(".container").append('<div class="takeMoney">TakeMoney</div>');
    $(".container").append('<div class="savingPlans">Saving Plans</div>');
    $(".container").append('<div class="startButton">Home</div>');
    $(".startButton").click(function() {
      $(".container").empty();
      home();
    });
  }

  function home() {
    $(".container").append('<div class="startButton">Start Again</div>');
    $(".container").append('<div class="startButton2">View Trajectory</div>');
    $(".startButton").click(function() {
      $(".container").empty();
      startPage();
    });
    $(".startButton2").click(function() {
      $(".container").empty();
      mainApp();
    });
  }




});

＆＃13;

@media all and (orientation: portrait) {
  @-ms-viewport {
    width: device-width;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
  }
}
@media all and (orientation: landscape) {
  @-ms-viewport {
    width: device-height;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
  }
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
body {
  font-size: 11pt;
  font-family: "Segoe WP";
  letter-spacing: 0.02em;
  background-color: #000000;
  color: #ffffff;
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/c0/10/40/c010401ca403a4e02aae87459bfb298e.jpg");
  /*
    margin-left: 24px;
    margin-top: 26px;
        */
  -ms-user-select: none;
  -ms-touch-action: none;
}
#page-title {
  font-family: "Segoe WP SemiLight";
  font-size: 41pt;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
.container {
  /*
    width: 60%;
    height: 40%;
    margin: 30% 20% 20% 20%;
    color: red;
        */
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("url(https://s-media-cache-ak0.pinimg.com/736x/fa/c3/d9/fac3d9517be53c025fbb494440369934.jpg)");
  background-repeat: no-repeat;
  background-size: cover;
}
.dummy-container {
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/c0/10/40/c010401ca403a4e02aae87459bfb298e.jpg");
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.startButton {
  height: 10%;
  width: 50%;
  background-color: black;
  position: relative;
}
.startButton2 {
  height: 10%;
  width: 50%;
  background-color: black;
}
.addMoney {
  height: 10%;
  width: 50%;
  background-color: black;
}
.takeMoney {
  height: 10%;
  width: 50%;
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class='dummy-container'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

View on JSFiddle