Question

在使用javascript按下按钮后，我有一个“div”，我'fadeOut'。 'div'消失后，我希望它'淡入'。目前这不适合我。我理解回调函数的概念，但我似乎没有成功地在我的代码中实现它。有人可以建议吗？如果可能的话，我想要一个回调函数解决方案。

function fade_effect(element, callback) {

  var x = function(element) {
    var elem = document.getElementById(element);
    elem.style.transition = "opacity 2.0s linear 0s";
    elem.style.opacity = 0;
    return elem;
  }

  var thisElement = x(element);
  fadeIn(thisElement);
}

function fadeIn(element_input) {
  element_input.style.transition = "opacity 2.0s linear 0s";
  element_input.style.opacity = 1;
}

div#box1 {
  background: #9dceff;
  width: 400px;
  height: 200px;
}

<button onclick="fade_effect('box1',fadeIn);">Magenta</button>
<div id="box1">Content in box 1 ...</div>

Answer 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);
}

Answer 2

你的变量名在fadeIn函数中是不匹配的。

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

Javascript回调函数在fadeOut / fadeIn CSS3 Transition中不起作用

2 个答案: