淡出/淡出使DIV's堆叠而不是重叠?使用& # 39;绝对# 39;这不是一个解决方案

FadeIn / FadeOut make DIV's stack instead of overlapping? Using 'absolute' wasn't a solution

本文关键字：淡出 这不是 绝对 一个 使用 解决方案 DIV 重叠      更新时间：2023-09-26

我目前正在使用以下代码来淡入/淡出各种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是堆叠的。在我看来，这让事情看起来有点"丑陋"。

删除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
});

小提琴

不要用fadeout，用hide 

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

我通过引入一些延迟使其工作。自从检查&取消检查几乎是同时发生的，你看到两个文本之前一个被删除

$('input').on('ifChecked', function(event){
    var extraInformationId = $(this).closest('label')[0].id;
    if(extraInformationId != undefined) {
        setTimeout(function(){
$('div.extraInfo[data-extrainformationfor="' + extraInformationId+'"]').fadeIn(1000);
},1000)
    }
}); 
[jsfiddle][1]
相关文章：