Question

大家好！我对JS / JQuery不是很了解，所以我需要一些帮助...

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

我想要完成的是：

该页面加载了所有圈子隐藏（轻松完成css display：none;）
当'按钮'中中心是我想要的圆圈淡入 - 按顺序从最小到最大
当 '按钮'被淘汰了，我想要的圆圈淡出 - 按顺序排列从最小到最小

所有圆圈都是单独的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 ...
    });
});

在悬停，延迟切换序列

2 个答案:

翅片。