jquery - jQuery过早淡入

Question

我正在尝试使一组方形 div（“.block”）在单击一个时淡出，以替换为更大的 div（“#container”），一旦它们淡出就会淡入。这工作正常：

$('.block').animate({opacity:0},400,'swing',function(){ $('#container').fadeIn();});

我在这里使用“动画”，因为我不希望块所占据的空间在它们淡出时崩溃（如果我使用淡出会发生这种情况）。

'#container' div 有一个关闭按钮，单击该按钮应该会淡出容器并再次淡入块。问题来了：当点击关闭按钮时，容器淡出没问题，但是新块出现的非常突然，好像它们没有等待容器先关闭一样。代码：

$('#container').fadeOut(400,function(){ $('.block').animate({opacity:100},400,'swing');});

这个问题建议增加延迟——对我来说，这一切都是淡出容器，然后等待一秒钟，然后很快（太快）把块带回来。

任何为什么这不起作用的想法都非常感激。

Answer 1

CSS opacity 接受从 0 到 1 的值。

$('#container').click(function () {
    $(this).fadeOut(400, function () {
        $('.block').animate({
            opacity: 1 //was 100
        }, 400, 'swing');
    });
});

http://jsfiddle.net/WEhCc/1/