Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

How can you fade one element in, and at the very same time, fade another element out?

I have two elements that I'm trying to fade in and out seamlessly. However, I can't get the timing down. The elements are overlapping each other. How can you achieve this?

        <div class="time-of-day">
            <h2 class="tod fadeText"></h2>
            <h2 class="wod fadeText"></h2>
        </div>
let wod = document.querySelector(".time-of-day h2.wod");
let tod = document.querySelector(".time-of-day h2.tod");

$(wod).delay(2000).fadeToggle(2000);
$(tod).fadeToggle(2000);

1 Answer

Steven Parker
Steven Parker
216,014 Points

I'm not sure what you mean by "seamlessly", Should both fade out at the same time,. or one out and one in in sequence? Or some other combination?

But if you wanted one to fade out and then the other to fade in you could do this:

$(wod).hide();
$(tod).fadeToggle(2000, _=> {$(wod).fadeToggle(2000);});

if that's not it, perhaps you could describe the effect you want to achieve in more detail.

Hey, Steven, thanks for getting back to me.

$wod and $tod are h2s that sit on top of each other, due to them being positioned absolute. What I'm trying to achieve, is have one h2 appear and hide the other when the page loads, then fade out the visible h2.. As that fades out, the other h2 fades in. Right now, the timing is wrong - so the two h2s overlap. I tried your soloution, however, the h2s still overlap.

Thanks, again :)

Steven Parker
Steven Parker
216,014 Points

The code needed to replicate your issue doesn't seem to be complete. There's no absolute positioning here, (no CSS shown), and no contents in the heading elements to be seen.

Also is your intended effect a crossfade, or should one fade out completely before the other fades in? Perhaps a timeline would describe it better, this example is for a crosssfade:

heading1:  Visible -------fadesout------> (hidden) -------fadesin ------> Visible
heading2: (hidden) -------fadesin ------> visible  -------fadesout -----> (hidden

Is this what you want?

$(wod).delay(2000).fadeIn(2000).fadeOut(1500);
$(tod).fadeIn(2000).fadeOut(1500).delay(2000);

I played with your solution, and found that this worked for me

Steven Parker
Steven Parker
216,014 Points

The graph was meant only to understand the indended effect, I was going to propose an actual solution afterwards. But good deal if you have it working as needed.

But you probably don't need that final "delay":

$(wod).delay(2000).fadeIn(2000).fadeOut(1500);
$(tod).fadeIn(2000).fadeOut(1500);