淡出动画后删除div-javascript

我正在尝试在动画完成后从主体中删除div，但目前看起来删除操作发生在动画的第一次迭代之后

function $(el) { return document.getElementById(el); }

var divFirst = $('first');
if(divFirst)
    divFirst.addEventListener("click", addSecond);

function removeSecond()
{
    fadeOut();
    var child = $('second');
    console.log("remove called");
    child.remove();
}

function addSecond()
{
    console.log("addSecond called");
    var aContainer = document.createElement('div');
    aContainer.setAttribute('id', 'second');
    aContainer.innerHTML = "Second";
    aContainer.addEventListener("click", removeSecond);
    document.body.appendChild(aContainer);
    fadeIn();
}

function fadeIn()
{
    var secondDiv = $('second');
    if(secondDiv)
    {
        secondDiv.style.opacity ? secondDiv.style.opacity : 
            secondDiv.style.opacity = "0.0";
        if(parseFloat(secondDiv.style.opacity) <= 1)
        {
            secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) + 0.05;
            setTimeout(fadeIn, 50);
        }
    }
}

function fadeOut()
{
    var secondDiv = $('second');
    if(secondDiv)
    {
        console.log(secondDiv.style.opacity);
        if(parseFloat(secondDiv.style.opacity) >0 )
        {
            secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) - 0.05;
            setTimeout(fadeOut, 50);
        }
    }
}

function$（el）{returndocument.getElementById（el）；}
var divFirst=$（'first'）；
如果（第一个）
divFirst.addEventListener（“单击”，addSecond）；
函数removessecond（）
{
淡出（）；
var child=$（'second'）；
console.log（“删除调用”）；
child.remove（）；
}
函数addSecond（）
{
log（“addSecond called”）；
var aContainer=document.createElement（'div'）；
setAttribute（'id'，'second'）；
aContainer.innerHTML=“第二”；
aContainer.addEventListener（“单击”，删除秒）；
文件.正文.附件（A容器）；
fadeIn（）；
}
函数fadeIn（）
{
var secondDiv=$（'second'）；
如果（第二分区）
{
secondDiv.style.opacity？secondDiv.style.opacity：
secondDiv.style.opacity=“0.0”；
if（parseFloat（secondDiv.style.opacity）0）
{
secondDiv.style.opacity=parseFloat（secondDiv.style.opacity）-0.05；
设置超时（衰减，50）；
}
}
}

这里是JSFIDLE： 如果删除child.remove（）调用，动画将一直持续到结束。 有什么想法吗

---

非常感谢

您的

淡出

是一个异步操作。当您调用它时，它会开始淡入淡出，但随后淡出会继续并异步完成，因为您使用的是

setTimeout

。因此，调用淡出后的代码将在启动后立即运行

若要在完成时删除该元素，请删除该代码，并在完成时在“淡出”中删除该元素：

function fadeOut()
{
    var secondDiv = $('second');
    if(secondDiv)
    {
        console.log(secondDiv.style.opacity);
        if(parseFloat(secondDiv.style.opacity) >0 )
        {
            secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) - 0.05;
            setTimeout(fadeOut, 50);
        }
        else                         // Added
        {                            // Added
            secondDiv.remove();      // Added
        }                            // Added
    }
}

或者，如果您想要更大的灵活性，让

fadeOut

在完成后调用回调并删除回调中的元素；我们通过将淡入淡出的实际工作与开始淡入淡出的实际工作分开来实现这一点：

用法：

function removeSecond()
{
    fadeOut(function(div) {
        div.remove();
    });
}

---

我通常是清洁解决方案的粉丝，所以第二个选项对我来说是最好的，但它仍然不起作用。我理解这个想法，但回调仍然没有被调用：/@CKY：我错过了淡出（fadeOut）在调用它自己（我不知道我是怎么错过的，但是…）。所以问题是最终到达

0

的调用没有

回调

参数。我已经把它修好了。

function removeSecond()
{
    fadeOut(function(div) {
        div.remove();
    });
}