Hi Guys,
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?
TIA
Are you using CSS or Javascript to change the colours. If you’re using CSS transitions I think there’s a way to detect the end of the transition movement.
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
this.onmouseover=function(){
hoverOrder[hoverOrder.length]=this.id;
}
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.
thanks Mark,
this is more or less what I tried to implement, but probably failed due to my inexperience with javascript. I’ll try some more as I would like extend my knowledge and I still don’t get it right I’ll come back with some questions (and code)