javascript - 图像在悬停时淡出为新图像

当用户将鼠标悬停在页面上的某个项目上时，我正在尝试更改div的背景图像。我知道必须有一种更好的方法来执行此操作。...这就是我现在所拥有的。

“＃11”是将要悬停的div。

“ #treeBG”是应该更改其背景图片的div

当前图像是bg.jpg，我希望该图像逐渐消失，而blur.jpeg逐渐消失。

$(function() {
  $('#11').hover(function() {
    $('#treeBG').css('background-image', 'url("blur.jpeg")');
        $('#treeBG').css('width', '100%');
        $('#treeBG').css('background-size', 'cover');
        $('#treeBG').css('background-repeat', 'no-repeat');
  }, function() {
 	// on mouseout, reset the background image
    $('#treeBG').css('background-image', 'url("blur.jpeg")');
  });
});

我的图像变化没有问题，我只希望它具有淡入淡出的过渡效果，看起来更好。

有任何想法吗？

最佳答案

$('#treeBG').fadeOut('slow',function(){
    $('#treeBG').css('background-image', 'url("blur.jpeg")');
    $('#treeBG').css('width', '100%');
    $('#treeBG').css('background-size', 'cover');
    $('#treeBG').css('background-repeat', 'no-repeat');
    $('#treeBG').fadeIn('slow');
});

尝试这样做