Javascript jQuery在动画和颜色更改之间暂停

我想让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;
     }
    }

这是项目codepen.io的链接-将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*/
});

---

如果需要连续动画，则需要使用回调。不需要多次调用$（“#div”），jQuery是可链接的。如果不想链接，则将结果缓存为varialbe@Saar你的意思是像

var div=$（“#div”）

然后像这样使用它

div.fadeOut（）

？确切地说，每次调用jquery函数时，您都在搜索DOM，这是一项繁重的操作。感谢提示：）@ImranBughio非常感谢！，现在一切都好了！。