如何在 Jquery 中使用 .css 更改背景图像时添加淡入效果

Question

嘿伙计们，我尝试在 Jquery 中使用 .css 更改背景图像时添加淡入淡出效果 我对java不太了解，希望有人能帮助我！

更改CSS背景图像的代码在这里非常简单：

$(document).ready(function(){
$("#button01").click(function () {
      $("#content_wrapper").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
        });
    }); 

它就像一个图像库，我只是在CSS背景图像中显示它 一切正常，但我想知道是否可以添加淡入或淡入效果。

Answer 1

您无法将一张图像淡入另一张图像，只能将纯色背景色等属性淡入淡出。

您可以做的是淡化包含图像的元素的不透明度。

使用这种方法，为了达到您想要的效果，您需要做的就是将 2 个图像一个叠放在另一个之上。

然后您可以淡出其中一个，同时淡入另一个。

比如：

// write a little function to do a toggling fade
jQuery.fn.fadeToggle = function(speed, easing, callback) { 
   return this.animate({opacity: 'toggle'}, speed, easing, callback); 
};

// make sure one layer is marked as active and shown and the other is hidden
$("#layer1").show();
$("#layer2").addClass('inactive').hide();

// then you can do this:
$("#button01").click(function () {
    $("#layer1").fadeToggle('slow').toggleClass('inactive');
    $("#layer2").fadeToggle('slow').toggleClass('inactive');
    // then set the new background image for the hidden layer
    $(".inactive").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
};

可能不是一个很好的解决方法，但我认为它应该有效。

Answer 2

对于淡入淡出效果，您需要让两个图像在某种程度上同时可见。我建议你使用2层。底部将始终包含您想要淡出的图像。顶部的图层将包含将变得透明的图像。

您将无法在容器内放置任何带有淡入淡出背景的内容，或者淡入淡出效果也会影响内容。

然后使用带有效果的 jQuery，执行以下操作：

$('#element').fadeOut('slow', function() {
    // Animation complete.
});