2

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!

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

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.

tino
  • 21
  • 2

2 Answers2

1

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.

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.

So something like:

// 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.

Acorn
  • 49,061
  • 27
  • 133
  • 172
  • so I can let the background image fade in instead of just swapping out the original one? – tino Feb 20 '11 at 21:09
0

For the fade effect, you need to have both images visible to some degree at the same time. I suggest you use 2 layers. The bottom will always contain the image you want to fade out to. The layer on the top will contain the image which will become transparent.

You won't be able to have ANY content inside your container with the fading background, or the fade effect will also influence the contents.

Then using the jQuery with effects, do this:

$('#element').fadeOut('slow', function() {
    // Animation complete.
});
Alex
  • 14,338
  • 5
  • 41
  • 59
  • so I won't be able to target the image cuz it's a background image in css right? I'd have to fade in and out the whole div...? or is there a way i can give the image a id? – tino Feb 20 '11 at 21:21
  • Is there a reason why you don't want to fade out the whole div? As long as you keep your images in separate containers from any persistent content you have (if you do indeed need this) there shouldn't be a problem. – Acorn Feb 20 '11 at 21:26
  • @tino, you are correct. You can manipulate the opacity of the background only when giving it a solid color. You can't manipulate the opacity of the background image. You can though manipulate the opacity of the whole DOM element, with all of its contents. I can give you an example of how fading images from one to another works: http://www.thalassinos.net/ . Here, the grayscale images have a fade-out effect, to reveal the colored equivalent in the background. The script is self-made, for performance reasons and for less bugs on hovering fast from one image to another. – Alex Feb 21 '11 at 08:30
  • @Acorn Im using background image because I want it to extend when people stretch the browser, I'll try using the 2 layers and fading in/out the whole div, thanks! – tino Feb 21 '11 at 17:19
  • @tino, background images don't extend. They get cropped. – Alex Feb 21 '11 at 17:35