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

Mayur Pande
Courses Plus Student 11,711 PointsHow 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
242,191 PointsSure, 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
Courses Plus Student 11,711 PointsMayur Pande
Courses Plus Student 11,711 PointsHi 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()
andfadeOut()
functions are asynchronous. As I thought javascript executes the code synchronously?Steven Parker
242,191 PointsSteven Parker
242,191 PointsPerhaps 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.