Help with a Show/Hide based on timer Javascript.

Looking for some javascript help: I have this script that Shows One Div while Hiding another based on a timer and I am fine to get that to work but now I would like to make it work on a whole section.
I tried changing the parts that say div to section/sections - but that didn’t seem to work. I have another script that adds the needed .roll class which works fine.   https://www.atgfnxt.net/mn2 - The Second section is currently hidden as the .roll class has been applied.
I have a working example here using just two divs within the same section. https://www.atgfnxt.net/minnesota  - Note: There is a different script for the Button that hides the text to show the form.

<script type="text/javascript">
var current = 0;

var divs = $(".roll");
var timer = setInterval(function() {
  if (current < divs.length - 1) {
    divs.eq(current).hide();
    current++;
    divs.eq(current).fadeIn("normal");
  } else
    clearInterval(timer);
}, 2500);
</script>

When the line var section = $(".roll"); is run the roll class has not been added yet so there are no elements for the rest of the code to work on.

"divs" is just a variable name. if you change it to something else e.g. sections, it won't make any difference. The only way you change what is selected is by changing the ".roll" part. This is just a standard CSS selector that jquery processes, so you could do something like "section .roll" which would pick all elements with the roll class applied that are children of a <section> tag. or "section.roll" which would pick all section elements that have the roll class applied etc.

I'd probably avoid using jQuery animation methods here altogether tbh. They directly modify the style property of the element which overrides the display part of your roll class. Perhaps a better way might be to just apply the class or remove it and then use CSS to control your transition. Up to you obviously.

16 hours ago, creedon said:

When the line var section = $(".roll"); is run the roll class has not been added yet so there are no elements for the rest of the code to work on.

OK, @creedon that makes sense, I have another script that is adding the .roll and .loadingatg styles to the section class - So what I think needs to happen is add something to make sure the timer script does not run before that first script has added the styles? I am guessing there is probably a way to combine the two scripts into one script to make it work? The whole point of this is to create a fake loading section before the main content loads. In the version I have working I just used a two code blocks with the content and the class styles already part of that code. Guess I am going to have to teach myself some basic js.

Here is what I have to add the styles: 

<script type="text/javascript">
 $(function() {
    $('[data-section-id="611940b4602eec3d4070fbbd"]').addClass("loadingatgf");
    $('[data-section-id="611950f4e7841a61e1280c2d"]').addClass("roll");
  });
</script>

and then this is the time:

<script type="text/javascript">
var current = 0;

var section = $(".roll");
var timer = setInterval(function() {
  if (current < divs.length - 1) {
    divs.eq(current).hide();
    current++;
    section.eq(current).fadeIn("normal");
  } else
    clearInterval(timer);
}, 2500);
</script>

Something like the following might do the trick.

<script type="text/javascript">

  $( ( ) => {
  
    $('[data-section-id="611940b4602eec3d4070fbbd"]').addClass("loadingatgf");
    $('[data-section-id="611950f4e7841a61e1280c2d"]').addClass("roll");
    
    var current = 0;
    
    var section = $(".roll");
    var timer = setInterval( () => {
      if (current < divs.length - 1) {
        divs.eq(current).hide();
        current++;
        section.eq(current).fadeIn("normal");
      } else
        clearInterval(timer);
    }, 2500);
    
    } );
    
  </script>

This code is untested.

The main change is to bring the code under one roof and wrap everything in the jQuery document ready. That way the code runs after the document is loaded and in order.

I also used the more modern function syntax. Note jQuery doesn't seem to like ES6 style functions into most of it's methods so continue to use old style function syntax. Here it is not a problem.

Let us know how it goes.

Thanx! @creedon That was almost it. But it helped me get it working. The two things that were wrong were that I had pasted an altered version of the timer code so some of the selectors had been changed to section in my attempts to make it work instead of the original divs which messed it up and also I was forgetting to add the .roll class to the first section as it needed both to work. Here is the final working code. Just have to clean up a spacing issue. For some reason .page-section is forcing to position block instead of flex.

<script>

  $( ( ) => {
  
    $('[data-section-id="611940b4602eec3d4070fbbd"]').addClass("loadingatgf");
    $('[data-section-id="611940b4602eec3d4070fbbd"]').addClass("roll");
    $('[data-section-id="611950f4e7841a61e1280c2d"]').addClass("roll");
    
    var current = 0;
    
    var divs = $(".roll");
    var timer = setInterval( () => {
      if (current < divs.length - 1) {
        divs.eq(current).hide();
        current++;
        divs.eq(current).fadeIn("normal");
      } else
        clearInterval(timer);
    }, 2500);
    
    } );
    
  </script>

@creedon Just a quick question if you have a moment. This is all working great but I was wondering do you think the FadeIn part could be an actual fade so that the sections disappear and appear a bit slower instead of instanously. I know there is another way I could do the transition so that one fades out and the other fades without the timer part but since I got this all working I was hoping I could tweak this and make it perfect.

Current working version: https://www.atgfnxt.net/mn2

24 minutes ago, UtopiaCreates said:

I was wondering do you think the FadeIn part could be an actual fade so that the sections disappear and appear a bit slower instead of instanously. I know there is another way I could do the transition

I'd probably opt for the other way if it is using CSS transitions. I think the hide and fadeIn methods were more for when CSS couldn't do all the fancy stuff it can now.