SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Synchronous Jquery functions

    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

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    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.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •