Let’s say that I have a few divs on a page and I create a function that when the mouse cursor hovers over a div it changes it’s color from 1 color to another in 2 seconds. So if I quickly hover over different divs the color changing effects take place simultaneously.
What I want is for any div to only change it’s color AFTER the previous color transition is over. So If I hover over one div and then quickly hover over another one , the later will only change it’s color once the color transition of the former ends.
I’ve tried a few things but none work. I guess it’s due to the asynchronous nature of javasript?
Can you please give me a few pointers to where I should be looking at to learn how to create such functions?
Using a timer I would probably put a flag on to the second div on hover. When the first has finished it’s transition and the flag for the second exists call the second transition. If I wanted to do this to a number of divs I would create an array of the hovered divs. Probably something like
As I get to the end of the transition for the previous in the array I’d check a next exists. If it doesn’t, clear the array and start again on the next initial hover.