悬停时，延迟切换序列答案

【问题标题】：On Hover, Delayed Toggle Sequence悬停时，延迟切换序列
【发布时间】：2011-04-23 21:26:53
【问题描述】：

大家！我不太擅长 JS/JQuery，所以我需要一些帮助...

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

我想要完成的是：

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

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

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

感谢所有帮助的人！

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

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

请在 Webkit 中查看！

【问题讨论】：

标签： jquery hover toggle delay

【解决方案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/

鳍。

【讨论】：

哇！这非常有效！非常感谢，没想到会有完美的答案！

【解决方案2】：

查看fadeIn() 文档。您可以传递一个附加参数，该参数称为动画完成功能。然后你可以像这样链接效果：

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

【讨论】：

也谢谢您！这有助于我了解一点 JavaScript。