Javascript 使用.animate（）沿y方向移动时，水平重复的图片会抖动

我正在用一个div对一个加载屏幕进行编码，该div会慢慢移出屏幕。但它抽搐的原因我不知道

这就是我所说的代码：

功能fadeLoadingScreen（）{
$（“#加载横幅”）。设置动画({
底部：“-15%”，
不透明度：0
},
2000,
函数（）{
$（'#loadingDiv'）.hide（）；
});
}
$（文档）.ready（函数（）{
fadeLoadingScreen（）；
});
#加载div{
位置：固定；
宽度：100%；
身高：100%；
背景色：白色；
z指数：10000；
}
#装载横幅{
背景图像：url（“http://images.gofreedownload.net/thumps/crown-pattern-banner-erected-europeanstyle-vector-89228.jpg");
背景尺寸：自动100%；
背景重复：重复-x；
位置：固定；
底部：0；
身高：15%；
宽度：100%；
z指数：10000；
}

抱歉，我没有保存，JSFIDLE链接包含一个错误（由于图片原因，它在https上也不起作用。请尝试定义以像素为单位的高度，而不是百分比。好的，这样就可以了。有什么解释为什么会发生这种情况吗？