Question

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

Please view in Webkit!

Answer 1

There’s probably a cleaner way to write the setTimeout calls using jQuery, but this works.

$(function() {
    var $circles = $('div.wrap4 > div:not(#box)').css('opacity', 0),
        numCircles = $circles.length,
        duration = 200,
        fadeIns = [],
        fadeOuts = [];

    function getNextCallback(s, o) {
        return function() {
            $(s).animate({opacity: o}, duration);
        };
    }

    function stopFadeIn() {
        var i = fadeIns.length;
        while (i--) {
            clearTimeout(fadeIns[i]);
        }
        fadeIns = [];
        $circles.stop();
    }

    function stopFadeOut() {
        var i = fadeOuts.length;
        while (i--) {
            clearTimeout(fadeOuts[i]);
        }
        fadeOuts = [];
        $circles.stop();
    }

    $('#box').hover(function() {
        // button mouseover
        var start = numCircles,
            i = 0;

        stopFadeOut();

        while (start--) {
            fadeIns.push(setTimeout(getNextCallback('#cc' + start, 1), duration * i++));
        }
    }, function() {
        // button mouseout
        var i, end = numCircles;

        stopFadeIn();

        for (i = 0; i < end; i++) {
            fadeOuts.push(setTimeout(getNextCallback('#cc' + i, 0), duration * i));
        }
    });
});

Demo: http://jsfiddle.net/mattball/xkLgf/

Fin.