使用.animate（）在y方向上移动时，水平重复的图像会抽搐

Question

我正在使用缓慢移出屏幕的div编码加载屏幕。但由于我不知道的原因，它正在抽搐。

这是我正在谈论的代码：

＆＃13;

＆＃13;

function fadeLoadingScreen() {
  $('#loadingBanner').animate({
      bottom: "-15%",
      opacity: 0
    },
    2000,

    function() {
      $('#loadingDiv').hide();
    });
}
$(document).ready(function() {
  fadeLoadingScreen();
});

＆＃13;

#loadingDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 10000;
}
#loadingBanner {
  background-image: url("http://images.gofreedownload.net/thumps/crown-pattern-banner-erected-europeanstyle-vector-89228.jpg");
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: fixed;
  bottom: 0;
  height: 15%;
  width: 100%;
  z-index: 10000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadingDiv">
  <div id="loadingBanner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/71btwr2j/

任何人都可以解释这种行为吗？