javascript - 点击即可淡入背景

我正在尝试使此背景在点击时逐渐消失。我发现一个有用的教程，最终创建了代码，因此它具有两张图像，单击它们淡入淡出以显示图片。
这是工作:http://www.mccraymusic.com/bgchangetest.html

不过只有几个问题:

如何在不随机选择图像的情况下进行这项工作？我希望它可以从纯黑色图像切换到带有鼓组的图像。 (如果可能，请交叉淡入淡出，但不是必需的)

如何将图像在页面上居中，使感光鼓的图像居中？

最佳答案

我猜这就是你的追求:

$(function() {
    var images = ["black.jpg","bg.jpg"];
    $('<img>').attr({'src':'http://www.mccraymusic.com/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);

    $('.entersite').click(function(e) {
        e.preventDefault();
        var image = images[1];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'http://www.mccraymusic.com/assets/images/'+image);
              $(this).fadeIn(1000);
        });
        $(this).fadeOut(1000, function() {
            $(this).remove();
        });
    });
});​

DEMONSTRATION

还添加了:

display: block;
margin-left: auto;
margin-right: auto;

到#bg元素以使图像居中。