On Hover, Delayed Toggle Sequence

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 开发者_如何学Cthe 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!

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.

Take a look at the fadeIn() docs. You can pass an additional parameter which is function called completion of the animation. You can then chain effects as in:

$('#circle1').fadeIn(500, function() {
    $('#circle2').fadeIn(500, function () {
        // more fadeIn()s ...
    });
});