CODEWITHSUNDEEP
javascriptjquerycss
Blainer
Blainer

Reputation: 2702

fadeIn background image on click

I have a working code that changes my document background image when links in my navbar are clicked. The background image changes instantly with no animation. How could I make the new background image fadeIn(); ?

js

$('.navigation a').click(function() {
    currentBg = $(this).attr('href').replace('#', '') +'.jpg';
    $('.background').css({'background-image':'url(images/skins/'+currentBg+')'});
});

Upvotes: 1

Views: 331

Answers (6)

Anonymous YouKnowYouDontKnowMe
Anonymous YouKnowYouDontKnowMe

Reputation: 1

As many others already said, it's impossible unless you use a block element as background. But if you only want an animation, you could have a .gif as background then when it's animation has finished replace it with the real Image so the .gif doesn't iterate itself

Upvotes: 0

Ben Sewards
Ben Sewards

Reputation: 2661

I agree with int0x90.

What you can do is this:

  1. Stack your images in a div, style position absolute, style of each image position absolute
  2. set an id for the div
  3. add a class active, with a z-index of 10
  4. set all inactive images in div z-index to 0
  5. you can use the z-index to pull the image with the highest z-index to the top of the stack
  6. add class active to the on-click of nav bar link and remove this class from the previous on click so that the image's z-index is set back to 0 and not overridden.
  7. in jquery, you may now be able to use opacity change and the speed of the change

hope this helps get you started!

Upvotes: 0

AshBrad
AshBrad

Reputation: 492

I've done something like this before by floating a foreground image on a separate div on top of the background image you'd like to 'fade' in and then creating a jquery fade-out effect on the foreground image.

You can use a similar trick to set solid text on a semi-transparent "background".

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Upvotes: 0

Frederick Behrends
Frederick Behrends

Reputation: 3095

There is no possiblity to fade the background image, you have to create a container and set its background image to let it fade in and fade out.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

You cannot animate the background image changing its opacity.

May be you can have a image with required opacity at different sections and then animate the background position so that it gives a fadeIn behavior.

Take a look at this link it will help you.

Upvotes: 0

user1243584
user1243584

Reputation:

I don't believe you can, the only way (that I know of) would be to have a block element (div for example) which has the background and that appears behind the rest of your content (positioned absolutely) and fade that in instead of switching backgrounds.

Upvotes: 3

Related Questions