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 Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

How can I get smooth fadeIn and fadeOut transitions using jQuery?

I have a ul that is showing on a webpage and another one that is hiding, when the user click on one of the item in the list li it will take them to a new li item.

However as I am using jquery fadeIn and fadeOut it seems to be a bit jolty/jittery is there a way to fix this?

Here is my code on code pen

1 Answer

Steven Parker
Steven Parker
242,770 Points
Steven Parker
Steven Parker
242,770 Points

Sure, you can make this smoother.

It looks like you already discovered the duration argument, where you can slow the speed down. That smooths things a bit.

But these functions are asynchronous, so if you call them one after the other in the code, they both happen at the same time. But since you are replacing images you probably want the first to finish before the second starts. To do that you can use the additional complete argument to start the second one only when the first one is done. That might look like this:

    $('#home-ul').fadeOut("slow", function () {
        $('#items-ul').fadeIn(1000);
    });
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi Steven Parker thanks for the answer. Just want to check my understanding is correct.

You have said the functions are asynchronous do you mean the actual fadeIn() and fadeOut() functions are asynchronous. As I thought javascript executes the code synchronously?

Steven Parker
Steven Parker
242,770 Points
Steven Parker
Steven Parker
242,770 Points

Perhaps a better term would be non-blocking.

JavaScript is single-threaded, but it supports timer events; and these are used to implement the fade functions.