平滑淡出背景​​图像

Question

我有以下代码，单击该代码可以更改背景图像...但是，这并不是平滑的更改。我尝试使用.fadeOut方法，但似乎无法正常工作。知道我能做些什么来使它起作用吗？

  var bgImages = new Array();

  bgImages[0] = "Images/jumpUp.jpeg"
  bgImages[1] = "Images/jumpDown.jpeg"
  bgImages[2] = "Images/jumpLeft.jpeg"
  bgImages[3] = "Images/jumpRight.jpeg"


  var i = 0;

  function upImgB() {
    if (i == 3) {
      i = -1;
    }
    i = i + 1;
    var url = 'url(' + bgImages[i] + ')';
    document.getElementById('mainBackgroundImage').style.backgroundImage = url;
  }

  function downImgB() {
    if (i == 0) {
      i = 4;
    }
    i = i - 1;
    var url = 'url(' + bgImages[i] + ')';
    document.getElementById('mainBackgroundImage').style.backgroundImage = url;
  }