jquery - onclick 事件更改背景图像与淡入淡出过渡

Question

我正在 jQuery 中寻找一个旅程，用于在类元素的单击事件中更改正文(或 100% 高度的“包装器”div)的背景图像，并具有交叉淡入淡出过渡效果.是否可以？提前谢谢你。

Answer 1

• DEMO: 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);
        });
    });
});