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

【问题标题】：How to add a fadeIn effect while changing background image using .css in Jquery如何在 Jquery 中使用 .css 更改背景图像时添加淡入淡出效果
【发布时间】：2011-06-30 21:42:58
【问题描述】：

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

这里更改css背景图片的代码非常简单：

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

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

【问题讨论】：

标签： jquery fadein css fadeto

【解决方案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)' } );
};

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

【讨论】：

所以我可以让背景图像淡入，而不是只换掉原来的？
非常感谢！我会试试这个

【解决方案2】：

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

您将无法在容器中包含任何带有渐变背景的内容，否则渐变效果也会影响内容。

然后使用带有效果的jQuery，这样做：

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

【讨论】：

所以我无法定位图像，因为它是 CSS 中的背景图像，对吧？我必须淡入淡出整个 div ......？或者有什么办法可以给图像一个id？
你不想淡出整个div有什么原因吗？只要您将图像与您拥有的任何持久内容（如果您确实需要它）保存在单独的容器中，就不会有问题。
@tino，你是对的。只有当给它一个纯色时，你才能操纵背景的不透明度。您不能操纵背景图像的不透明度。不过，您可以操纵整个 DOM 元素及其所有内容的不透明度。我可以给你一个例子来说明从一个到另一个淡化图像是如何工作的：thalassinos.net。在这里，灰度图像具有淡出效果，以显示背景中的彩色等效。该脚本是自制的，出于性能原因以及从一个图像快速悬停到另一个图像时出现的错误较少。
@Acorn 我正在使用背景图片，因为我希望它在人们拉伸浏览器时扩展，我将尝试使用 2 层并淡入/淡出整个 div，谢谢！
@tino，背景图片不会扩展。他们被裁剪了。