Question

我希望div为var changeColor = function() { var div = document.getElementById("div"); var p = document.getElementById("p"); var pText = p.innerHTML; if (pText == "Click Me!") { $(document).ready(function() { $("#div").fadeToggle("fast"); }, function() { $("#div").css("background-color", "aquamarine"); p.innerHTML = "More!"; }, function() { $("#div").fadeToggle("fast"); }); } else if (pText == "More!") { $(document).ready(function() { $("#div").fadeToggle("fast"); }, function() { $("#div").css("background-color", "coral"); p.innerHTML = "Click Me!"; }, function() { $("#div").fadeToggle("fast"); }); } else { return; } }，然后当它不可见时更改颜色和文字，然后才会重新出现。 这是代码

{{1}}

这是指向codepen.io，项目My Project

的链接

Answer 1

DEMO - 将javascript更改为以下内容：

  var changeColor = function() {
    var div = document.getElementById("div");
    var p = document.getElementById("p");
    var pText = p.innerHTML;
    if (pText == "Click Me!") {
        $("#div").fadeToggle("fast", function(){
          $("#div").css("background-color", "aquamarine");
          $("#div").fadeToggle("slow");
          p.innerHTML = "More!";
        });
    } else if (pText == "More!") {
        $("#div").fadeOut("fast", function(){
          $("#div").css("background-color", "color");
          $("#div").fadeIn("fast");
        });
    } else {
      return;
    }
  }

<强>解释

fadeToggle之类的函数可以采用在动画完成后触发的回调函数：

$("#div").fadeOut("fast", function(){
    /*code here will trigger after animation is complete*/
});

jQuery在动画和颜色变化之间暂停

1 个答案: