如何在Jquery中使用.css更改背景图像时添加淡入淡出效果 [英] How to add a fadeIn effect while changing background image using .css in Jquery

问题描述

嘿伙计们，我试图在Jquery
中使用.css更改我的背景图片时添加淡化效果我真的不太了解java，希望有人可以帮助我！

Hey guys, Im trying to add a fadein effect while changing my background image using .css in Jquery I dont really know much about java, hoping someone can help me out here!

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

The code for changing css background image is pretty simple here:

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

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

It's like a image gallery, Im just showing it in css background image everything works fine, but I was wondering if it's possible to add the fadeIn or fade-to effect.

推荐答案

你不能淡化一张图像到另一个，只有固体背景颜色等属性。

You can't fade one image to another, only properties such as solid background colours.

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

What you can do is fade the opacity of an element containing an image.

使用这种方法，为了达到你想要的效果，你必须做的就是让2张图像一个在另一个上面。

Using this method, what you will have to do in order to achieve the effect you want is to have 2 images one on top of the other.

然后你可以在淡出另一个时淡出一个。

Then you can fade out one while fading in the other.

所以类似于：

// 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)' } );
};

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

Probably not a beautiful way of going about it, but I think it should work.

这篇关于如何在Jquery中使用.css更改背景图像时添加淡入淡出效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！