Hi, everyone! I’m not very good with JS/JQuery, so I need some help here…
I have a page both vertically and horizontally centered. In this page I have a series of concentric circles, with a button in the centre.
What I want to accomplish is the following:
- The page loads with all circles hidden (easily done with css display:none;)
- When the ‘button’ in the centre is hovered over, I want the circles to fade in – in order from smallest to largest
- When the ‘button’ is moused out, I want the circles to fade out – in order from largest to smallest
All of the circles are separate DIV elements, never overlapping each other.
Please feel free to check the code, and edit it if you have a solution.
Thanks, to anyone that helps!
Screenshot: http://cl.ly/6CJR
ALL CODE: http://cssdesk.com/cNeCx
EDIT: Please view in Webkit!