Javascript回调函数在淡出/淡出CSS3转换中不工作

我有一个“div”，我用javascript按下按钮后会“淡出”。在“div”淡出之后，我希望它是“fadeIn”。我目前没有这种情况。我理解回调函数的概念，但似乎没有在代码中成功实现它。有人能给我建议吗？如果可能的话，我想要一个回调函数解决方案

函数淡入淡出效果（元素，回调）{
var x=函数（元素）{
var elem=document.getElementById（元素）；
elem.style.transition=“不透明度2.0s线性0s”；
elem.style.opacity=0；
返回元素；
}
var thisElement=x（元素）；
fadeIn（该元素）；
}
功能fadeIn（元素输入）{
element_input.style.transition=“不透明度2.0s线性0s”；
元素_input.style.opacity=1；
}

div#box1{
背景：#9dceff；
宽度：400px；
高度：200px；
}

洋红色

---

框1中的内容…在我看来，您似乎试图使事情变得过于复杂。知道转换持续2秒，您可以使用简单的JavaScript超时在转换完成后淡入

function fade_effect(element){
    var elem=document.getElementById(element);
    elem.style.transition="opacity 2s linear";
    elem.style.opacity=0;
    setTimeout(function(){
        elem.style.opacity=1;
    },2000);
}

---

您的变量名在fadeIn函数上不匹配

function fadeIn(element_input) {
  element_input.style.transition = "opacity 2.0s linear 0s";
  element_input.style.opacity = 1;
}

---

可能是因为您的

fadeIn

函数正在接受一个

element\u输入

属性，并且您试图在函数内部使用

elem

，

x（）

接受一个参数，为什么要用两个参数调用它？

fade\u-in

使用一个未定义的变量

elem

。

x

中有一个同名变量，但它的作用域是该函数的局部作用域。@Barmar，我已修复了单参数x（）问题。正如上面的代码所示，实际上什么都不起作用，既不淡出也不淡入。这假设JavaScript和CSS都使用准确的计时器（它们不使用），并要求您在两个不同的位置保持这两秒钟。这两个点都是真的。然而，在我一直使用

setTiemout

延迟操作直到转换完成的过程中，我从来没有看到肉眼可以看到的差异。出于维护目的，如有必要，可以使用变量来保存时间。是否有可能获得类似于我试图获得的上述方法的回调解决方案？@dave看到重复的问题，它准确地回答了您的问题。修复了它。我读错了，还是不起作用。乍一看，修复javascript异常就是您所追求的。看起来您想要为fadein/out编写一个纯javascript动画。如果您已经在使用jquery，那么使用它会更容易。请在此处查看：