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 Kristian Woods
Kristian Woods
23,414 Points

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
229,744 Points
Steven Parker
Steven Parker
229,744 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.

Kristian Woods
Kristian Woods
23,414 Points

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
229,744 Points
Steven Parker
Steven Parker
229,744 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?

Kristian Woods
Kristian Woods
23,414 Points 
$(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
229,744 Points
Steven Parker
Steven Parker
229,744 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);