javascript - FadeIn/FadeOut 使 DIV 的堆栈而不是重叠？使用 'absolute' 不是解决方案

Question

我目前正在使用以下代码来淡入/淡出各种 DIV(其中包含信息)。这有效，但我对结果不满意。它应该相互重叠，而不是相互堆积。

我进行了搜索，唯一可行的方法是添加:position:absolute;在 CSS 中。虽然这有效，但它会弄乱它下面的其余项目。所以我想解决这个问题。

我确实读过有关插入所谓的回调函数的信息，但是我不知道如何将其用于此编码。

这是一段淡入/淡出代码:

$('.extraInfo').hide();

$('input').on('ifChecked', function(event){
    var extraInformationId = $(this).closest('label')[0].id;
    if(extraInformationId != undefined) {
        $('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').fadeIn(500);
    }
});

$('input').on('ifUnchecked', function(event){
    var extraInformationId = $(this).closest('label')[0].id;
    if(extraInformationId != undefined) {
        $('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').fadeOut(500);
    }
});

除了将 CSS 更改为绝对值之外，我自己能想到的最好的方法是将淡入/淡出从 500 更改为 0。但这并不是真正的解决方案。 :|

如果您需要更多信息和/或详细信息，这里是 JSFiddle .

当您单击项目时，您会注意到 DIV 正在堆叠。在我看来，这让事情看起来有点“丑陋”。

Answer 1

删除 ifUnchecked 部分并将其用于 ifChecked

$('input').on('ifChecked', function(event){
    $("div.extraInfo")
        .fadeOut(500)    // hide all divs with class `extraInfo`
        .promise()       // "wait" for the asynchonous animations to complete
        .done(function() {    // and then show the info for the selected one
            var extraInformationId = $(this).closest('label').attr("id");

            if(extraInformationId) {
                $('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').fadeIn(500);
            }
        }.bind(this));    // preserve the value of this for the callback of fadeOut
});

fiddle