Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jackson Monk
Jackson Monk
4,527 Points

This doesn't make sense

I am using jQuery fadeOut() and fadeIn() functions. Here is my code:

   comDivs = document.getElementsByClassName('comDiv');

    for (let y = 0; y < comDivs.length; y ++) {

        $(comDivs[y]).delay(4000).fadeOut(400, function() { 

           if (y + 1 != comDivs.length) {

           $(comDivs[y + 1]).delay(350).fadeIn(400);
       }  
    });
  }

The length of comDivs is 3. The first animation works as it should. The first item is on the screen, waits 4 seconds, then fades out. After 350 milliseconds, The next element fades in, but after the same period of time (350 milliseconds) the next element after that fades in. By my logic, after the second element fades in, the if block should end and so should the fadeOut anonymous function, and the loop should run again, this time with the y value being 1, and wait 4 seconds before fading out like the function tells it to, then fade in the next element. Again, immediately after the second element fades in, the third element fades in with it. I have gone over what should happen 15 times in my head and twice on paper, and it just doesn't make sense.

Jackson Monk
Jackson Monk
4,527 Points

Well it didn't work but thanks for trying. The entirety of my code is a webpage, and I don't think you want me copy pasting that entire thing in here

Jordan Hoover
.a{fill-rule:evenodd;}techdegree seal-36
Jordan Hoover
Python Web Development Techdegree Graduate 59,268 Points

Right you don't have to copy the whole page, its just a little hard to debug with this information. Try to use the chrome dev tools and set a breakpoint in the code to see whats going on.

Jackson Monk
Jackson Monk
4,527 Points

I'll sound stupid but what is a breakpoint?

Jordan Hoover
.a{fill-rule:evenodd;}techdegree seal-36
Jordan Hoover
Python Web Development Techdegree Graduate 59,268 Points

That's not stupid. Its a way to debug your code - it stop the execution at the point you specify. You can read up on it here. There are also plenty of Treehouse courses about it.

You can also run console commands while the script it paused.

1 Answer

Jordan Hoover
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jordan Hoover
Python Web Development Techdegree Graduate 59,268 Points
Jordan Hoover
.a{fill-rule:evenodd;}techdegree seal-36
Jordan Hoover
Python Web Development Techdegree Graduate 59,268 Points

Hmmm, my jQuery is a bit rusty, but I would suspect how you're setting up the loop is throwing things off. There also a few minor fixes that could be the issue. Try a recursive call, like this (I also fixed some other parts of your code).

$comDivs = $('comDiv');
currentDivCount = 0

function showComDivs(currentDivCount){
        $comDivs.eq(currentDivCount).delay(4000).fadeOut(400, function() {
if (currentDivCount < $comDivs.length){
           currentDivCount++;
           $comDivs.eq(currentDivCount).delay(350).fadeIn(400);
           showComDivs(currentDivCount);
}
    });
  }

while(currentDivCount < $comDivs.length){
       showComDivs(currentDivCount)
}

Will probably need to see more of your code to help further.