1

I have a div with a background image defined:

#section0{
        background-image: url("images/top_back2.jpg");
    }

I have a setTimeout function changing the background image to something else 3s later

    $("#section0").css("background-image", "url(images/top_back.jpg)");
        }, 3000);

This works fine, but I can't seem to be able to make this image fade in no matter what I try.

Any ideas would be appreciated, it just appears on screen like this and it's very jarring. I can't add CSS3 fade in to the whole element as the content inside isn't shown for the first 3 seconds, and I need it to appear.

Thanks!

Andrei
  • 43
  • 2

1 Answers1

0

You have to define how it fades it as well, you can use opacity to achieve this effect, followed by the transition parameter which defines the animation properties such as duration and easing.

CSS:

#section0{
     opacity: 0;
     transition: opacity 2s; /* Define the duration of the opacity animation */
     background-image: url("images/top_back2.jpg");
}

JavaScript (inside your setTimeout):

$("#section0").css({
     "opacity" : 1,
     "background-image": "url(images/top_back.jpg)"
});

Here is a demo on JSFiddle with the code https://jsfiddle.net/wtbmdaxc/

Enjoy :)

Update:

To avoid the text to being covered, there are two ways to do it, either you separate your background image into another DIV and apply the opacity to that new DIV or you create a pseudo-element. Both of which have already been answered on SO before.

Let's try the first method, how it will work in your case

HTML:

<div id="section0">
  Example test. Lorem ipsum dolor sit amet.
  <div id="bg-opacity"></div>
</div>

CSS:

#section0{
}

#section0 #bg-opacity{
     position: absolute; /* Force this layer to appear at the top left of the div */
     top: 0;
     left: 0;
     z-index: -1; /* Makes the image appear in the back and not covering the texts */
     opacity: 0;
     transition: opacity 2s; /* Define the duration of the opacity animation */
     height: 500px;
     width: 500px;
     background-image: url("https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif");
}

JavaScript:

setTimeout(function(){ 
  $("#bg-opacity").css({
       "opacity" : 1,
       "background-image": "url(https://media.giphy.com/media/tIeCLkB8geYtW/giphy.gif)"
  });
}, 300);

And a new demo on JSFiddle: https://jsfiddle.net/zr7Lf0m5/

James Wong
  • 4,529
  • 4
  • 48
  • 65
  • Thanks for your help. This does work, but the content within the #section0 div is hidden as well. I need this to be shown from the start. Any way I can have the content still showing? – Andrei Oct 24 '19 at 03:07
  • @Andrei updated my answer with a method that should solve this problem :) – James Wong Oct 24 '19 at 03:29
  • 1
    Look promising, I'll give it a go! Thanks so much – Andrei Oct 24 '19 at 03:53
  • Sure thing, please mark my answer as helpful if it solved your problem. Cheers! – James Wong Oct 24 '19 at 04:04
  • I have some additional issues with this, the page it appears on uses fullPage.js. The documentation says "you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery)." Any idea how I can achieve this with the above code? – Andrei Oct 24 '19 at 08:58
  • Are you combining the above effect with a mouse click event? Delegation is only needed if you have events listeners like mouse click or keypress, for elements that are created after the DOM has been initialized. If this is the case, you will have to create a new post for that specific issue. – James Wong Oct 24 '19 at 10:16
  • I'll create a new post for this. It directly involves fullPage.js so it's a separate issue. [https://stackoverflow.com/questions/58540114/using-the-afterrender-callback-in-fullpage-js-to-run-code-with-jquery-events] – Andrei Oct 24 '19 at 11:14
  • @Andrei, great this way we'll be able to assist you correctly :) If there's nothing else on this thread, you may consider closing it, unless there are further issues with the solution provided thus far. – James Wong Oct 24 '19 at 11:16