0

Hi I am trying to fade In a new background image when i click a div. Currently the image loads instantly and i tried adding in a .fadeIn at the start of it like so:

    $('body').fadeIn("slow").css({"background-image": "url(Aboutme.jpg)", 'background-size'  : 400});

Can anyone tell me what im doing wrong? Have looked everywhere but noeone seems to have the same problem

red house 87
  • 1,837
  • 9
  • 50
  • 99

1 Answers1

0

Look Here

Quote below : From @Marcus Whybrow

You can get a similar effect by fading the image opacity to 0, then change the background image, and finally fading the image back in again.

This will require a div, behind everything else on your page which is as wide as the body.

<body>
    <div id="bg"></div>
    ...
</body>

You can make it as wide as the page using CSS:

#bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

And then animate it's properties.

$('#bg')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': 'url(1.jpg)'})
            .animate({opacity: 1});
    });

You could get more of a crossover effect, by having a second background div on top of this one, which you can then fade in.

Community
  • 1
  • 1
Orelsanpls
  • 22,456
  • 6
  • 42
  • 69
  • thanks for the quick reply, i tried your suggestion but it faded out everything but the bg image :/ maybe it would help if I gave you the link to the site:http://benliger.webatu.com/ – red house 87 Aug 26 '14 at 21:08
  • Looking at the other post of the provided link, it's not possible to fadeIn/out the background without fadeIn/out the content. There is maybe a tricks. Put a white background-color in your body. Create a div that have the size of your page with your background-image which have a z-index > to the body but < to the content of the page. Then you can use what I gave to you. Instead of fadeIn try hide/show. It's better at looking (no moving). – Orelsanpls Aug 27 '14 at 06:45
  • Thanks Random will go with the full width/ height div – red house 87 Aug 27 '14 at 08:16