悬停时，延迟切换序列

Question

每个人！我不太擅长 JS/JQuery，所以我在这里需要一些帮助...

我有一个垂直和水平居中的页面。在此页面中，我有一系列同心圆，中心有一个按钮。

我想要完成的任务如下：

• 页面加载所有圆圈 隐藏（用 css 很容易完成 显示：无；）
• 当“按钮”在 中心悬停在上面，我想要 淡入的圆圈 - 按顺序 从最小到最大
• 当 “按钮”已移出，我想要 淡出的圆圈 - 按顺序 最大到最小

所有圆圈都是单独的 DIV 元素，从不相互重叠。

请随时检查代码，如果有解决方案，请编辑它。

感谢任何有帮助的人！

屏幕截图：http://cl.ly/6CJR

所有代码：http://cssdesk.com/cNeCx

请在Webkit中查看！

Answer 1

可能有一种更简洁的方法来使用 jQuery 编写 setTimeout 调用，但这可行。

$(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));
        }
    });
});

演示： http://jsfiddle.net/mattball/xkLgf/

Answer 2

查看 fadeIn() 文档。您可以传递一个附加参数，该参数是称为动画完成的函数。然后你可以连锁效应，如下所示：

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