onclick 事件更改背景图像与淡入淡出过渡答案

【问题标题】：onclick event change background-image with fade transitiononclick 事件更改背景图像与淡入淡出过渡
【发布时间】：2010-06-08 17:06:38
【问题描述】：

我正在 jQuery 中搜索一次旅行，用于在类元素的单击事件上更改主体（或 100% 高度“包装器”div）的背景图像，并具有交叉淡入淡出过渡效果. 可能吗？提前谢谢你。

【问题讨论】：

标签： jquery css background fade

【解决方案1】：

演示： https://so.lucafilosofi.com/onclick-event-change-background-image-with-fade-transition

CSS：

*{margin:0;padding:0}
html ,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
#bg{position:absolute;height:100%;width:100%;margin:0;padding:0;z-index:0}

HTML：

<div><img id="bg" src="image.jpg" alt="" /></div>

JQUERY

var images = ["home_photo_welshboy.jpg","home_photo_jam343.jpg"];

$(function() {
    $('.change').click(function(e) {
    var image = images[Math.floor(Math.random()*images.length)];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'http://l.yimg.com/g/images/'+image); 
              $(this).fadeIn(200);
        });
    });
});

【讨论】：

看起来不错，但在我的系统上，旧图像淡出，新图像立即弹出。我认为您最好将新图像放在旧图像后面，然后淡出旧图像，这样新图像似乎会慢慢出现。
感谢您的回答，但我无法真正看到图像和另一个图像之间的淡入淡出过渡效果。我在 Mac 上使用 Firefox 3.6。
是的，我认为现在效果更好！我注意到您编辑了 Fade 值。非常感谢，你很温柔！ :)