jQuery execution sequence OR teach me thinking asinchronously

1

Dear campers,

I’m currently working on my Portfolio project, and had got a little bit sttuck at executing jQuery methods in a right sequence.

So, here’s my pen:

What I want to do, is to swap 3 #carouselPortfolio indicators with their labels according to carousel movement (active indicator in the middle, and neighbour slide’s indicators to the left and to the right.

I’m trying to bind indicators’ reorder logic to “slide.bs.carousel” event.
The Plan is to fade-out indicators, then reorder them seamlessly, and finally fade-in them back in a new order.

Buuuut… I get something different. :slight_smile:
And it looks that the problem is that I don’t understand the asynchronous execution paradigm.

Maybe you have some advice on my objective, or some brain-forming material to load the Idea of asynchronous pattern to my mind?

2

Hello again.
Looks like I’ve almost got the behavior I wanted to.

My current solution is to fade-out and fade-in the entire <ol> of indicators, but not individual <li>'s.

The only thing I don’t like is that highlighted indicator changes before the list is totally faded out.
Can I somehow pause the carousel’s sliding actions until my items finish to fade out?

And it looks like I’m still an alien in this asynchronous JS world.
I would be thankful for sharing some paradigm-shifting readings about JS execution timeline.