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

Question

我希望 div 为 fadeOut()，然后当它不可见时更改颜色和文本，然后但仅在此时重新出现。这是代码

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

这是 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*/
});