1

Sorry if this seems like a repeat of similar questions on Stack.
I've found lots of questions about fading background images in-and-out, or changing them with hovers but that doesn't entirely suit my need. I simply want to make it look like a loading.gif (set as background-image) is fading out.

I've tried to use the code and suggestions in this Stack Question here.

I've made a JSFiddle to work on my code but as I'm not a professional developer my jQuery experience and knowledge is ok at best and I can't get it to work.

Any help on this would be appreciated. JS Fidde: https://jsfiddle.net/tsruxyan/1/

Robin.83
  • 33
  • 6

2 Answers2

0

I don't really understand what you want to do and how but for changing the background or any thing other you can add a class to your element by jQuery $(elemnt).addClass then use animation in it's css codes and at the end remove class in callback function.

Arash Younesi
  • 1,671
  • 1
  • 14
  • 23
  • Thanks for the comment. I literally want the background-image of the gif to fade out to `opacity:0` on loading of the page. I've tried to do this by using the .jpg in the jQuery to cover it up. Giving the effect of it fading out. @ARASH – Robin.83 Jul 31 '17 at 11:59
0

The Problem is you didn't include jQuery as external Ressource in your JsFiddle. That is why you couldn't call jQuery functions in it.

I'm not exactly sure what you want to achieve, but if you add jQuery, you can simply add another (hidden) backround, use .fadeOut() to fade the first background out and then show the second background image using .toggle() to show the other background as soon as the first animation is done.

This is what that could look like:

$( "#clickme" ).click(function() {


  $( ".library-layout" ).fadeOut( "slow", function() {

    //Fade out ready, time to fade in the other image
    $( "#other-img" ).toggle( "slow", function() {
    // Animation complete.
        });
  });
});

A proof of concept is here.

Nils Schlüter
  • 1,418
  • 1
  • 19
  • 30
  • Thanks for the comment. I literally want the background-image of the gif to fade out to `opacity:0` on loading of the page. I've tried to do this by using the .jpg in the jQuery to cover it up. Giving the effect of it fading out. @NilsSchluter – Robin.83 Jul 31 '17 at 12:02
  • @Robin.83 so more like this? https://jsfiddle.net/tsruxyan/5/ Or do you want the loading indicator to stay on the screen, because in this version the loading indicator also fades away – Nils Schlüter Jul 31 '17 at 13:07
  • I want the image to stay on the screen and the loading indicator to fade out. @NilsSchluter – Robin.83 Jul 31 '17 at 13:56