如何在不排队的情况下完全执行 jQuery 动画

Question

我查看了这 3 个链接如何在不排队的情况下执行 jQuery 动画，但它们都不适用于我的项目。我想我没有以正确的方式实现它们，但我已经阅读了带有示例的完整信息，但仍然没有。有这些链接：

• https://css-tricks.com/full-jquery-animations/
• jQuery animation without queuing
• http://www.2meter3.de/code/hoverFlow/

我的项目中的问题是，当您快速多次单击#new-quote 按钮时，动画开始做一些疯狂的事情。

var getNewQuote = function() {
  var quote = {};
  $.ajax({
    url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&post",
    success: function(d) {
      quote.text = $(d[0].content).text().trim();
      quote.author = d[0].title;
    },
    datatype: "json",
    async: false,
    cache: false
  });

  return quote;
};

var getRandomColor = function() {
  var colors = [
      "#ff9966",
      "#7f00ff",
      "#396afc",
      "#0cebeb",
      "#06beb6",
      "#642b73",
      "#36d1dc",
      "#cb356b",
      "#3a1c71",
      "#ef3b36",
      "#159957",
      "#000046",
      "#007991",
      "#56ccf2",
      "#f2994a",
      "#e44d26",
      "#4ac29a",
      "#f7971e",
      "#34e89e",
      "#6190e8",
      "#3494e6",
      "#ee0979"
    ],
    randomNumber = Math.floor(Math.random() * colors.length);
  return colors[randomNumber];
};

var updateText = function($t, qt) {

  var twitter = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
  twitter += '"' + qt.text + '" ';
  twitter += qt.author;

  var tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=";
  tumblr += qt.author;
  tumblr += "&content=";
  tumblr += qt.text;
  tumblr += "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";

  var $icon = $("<i class='fa fa-quote-left'>")
    .prop("aria-hidden", true);

  $t.find(".quote-text").html("").append($icon, qt.text);
  $t.find(".quote-author").html("- " + qt.author);
  $("#tweet-quote").attr("href", twitter);
  $("#tumblr-quote").attr("href", tumblr);
};

var calcNewHeight = function(q) {
  var $temp = $("<div>", {
    class: "quote-container temp",
  }).appendTo($("body"));
  $temp.append($("<div>", {
    class: "quote-text"
  }), $("<div>", {
    class: "quote-author"
  }));
  updateText($temp, q);
  var h = $temp.height() + 40;
  $temp.remove();
  return h;
};

var changeColor = function(newColor) {
  $("body, .button:not(#new-quote)").animate({
    backgroundColor: newColor
  });
  $("#new-quote").animate({
    color: newColor
  });
  $(".quote-text, .quote-author").css("color", newColor);
  if ($("#modStyle").length === 0) {
    $("head").append(
      "<style id='modStyle'>#new-quote:before {background:" + newColor + ";}</style>"
    );
  } else {
    $("head style#modStyle").html("#new-quote:before {background:" + newColor + ";}");

  }
};

var getQuote = function(e) {
  var nq, nc, nh = 0;

  $(".quote-container").queue(function() {
      nq = getNewQuote();
      nc = getRandomColor();
      $(".quote-container").children().css("opacity", 0);
      changeColor(nc);
      $(this).dequeue();
    })
    .queue(function() {
      nh = calcNewHeight(nq);
      $(".quote-container, #new-quote").animate({
        height: nh / 16 + "rem",
      }, {
        duration: 1000,
        queue: false
      });

      $(".quote-container").animate({
        padding: "2.5rem"
      }, {
        duration: 1000,
        queue: false
      });

      $("#new-quote").animate({
        padding: "2.5rem .75rem"
      }, {
        duration: 1000,
        queue: false
      });
      $(this).dequeue();
    })
    .queue(function() {
      updateText($(".quote-container"), nq);
      $(".quote-container").children().fadeTo(750, 1);
      $(this).dequeue();
    })
};

$(function() {
  $("#new-quote").on("click", getQuote);
  $(".quote-container, #new-quote").css({
    visibility: "visible",
    height: 0
  });
  $("#new-quote").css("padding", "0 .75rem");
  getQuote();
});

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #333;
  color: #333;
  font-family: sans-serif;
}

.v-wrap {
  height: 100%;
  text-align: center;
}

.v-wrap:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}

.quote-container {
  width: 31.25rem;
  background: #fff;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.1875rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  visibility: hidden;
  padding: 0 2.5rem;
}

.quote-text {
  font-size: 1.625rem;
}

.quote-text i {
  margin-right: 0.6rem;
}

.quote-text p {
  display: inline;
}

.quote-author {
  font-size: 1rem;
  margin: 0 0.4rem 2rem 0;
  text-align: right;
}

.button {
  padding: 0.75rem;
  text-align: center;
  font-size: 1rem;
  color: #fff;
  border-radius: .1875rem;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.button:not(#new-quote):hover {
  opacity: .8 !important;
}

.button:not(#new-quote) {
  min-width: 1rem;
  min-height: 1rem;
}

.button i {
  vertical-align: middle;
}

#new-quote {
  white-space: nowrap;
  writing-mode: vertical-lr;
  height: 50%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  vertical-align: middle;
  background: #fff !important;
  margin: 0;
  position: relative;
  right: 0.25625rem;
  color: #333;
  visibility: hidden;
}

#new-quote:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0.0625rem;
  bottom: 0;
  left: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

#new-quote:hover:before {
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

footer {
  font-size: 0.85rem;
  margin: 1rem 0;
}

footer a {
  text-decoration: none;
  color: #fff;
  position: relative;
}

footer a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: .0625rem;
  bottom: 0;
  left: 0;
  background: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s;
}

footer a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/911574fea4.js"></script>
<div class="v-wrap">
  <div class="quote-container" style="">
    <div class="quote-text">
    </div>
    <div class="quote-author"></div>
    <a id="tweet-quote" class="button"><i class="fa fa-twitter"></i></a>
    <a id="tumblr-quote" class="button"><i class="fa fa-tumblr"></i></a>
  </div>
  <div id="new-quote" class="button">New quote</div>
  <footer>
    <a href="https://codepen.io/Kestis500">Created by LukasLSC</a>
  </footer>
</div>

codepen 项目链接：https://codepen.io/Kestis500/pen/opWGNY?editors=0010

jsfiddle 项目链接：https://jsfiddle.net/z5hds4Lp/2/

注意：
我无法解释为什么 AJAX 在这里不起作用，使用 codepen 或 jsfiddle 使用 AJAX 一切都可以。

Answer 1

通过快速单击“获取报价”按钮，我没有遇到任何特别“疯狂的事情”。但是这里有一种通过引入动画状态来对动画进行更多控制的选项。

添加一个布尔变量

var animating = false;

在动画期间切换真/假值。如果它已经在动画，不要让另一个动画被调用。

var getQuote = function(e) {
  if (animating) return;    // If already animating, don't let it call again
  animating = true;         // Tell the state that it is animating
  var nq, nc, nh = 0;

  $(".quote-container").queue(function() {
      nq = getNewQuote();
      nc = getRandomColor();
      $(".quote-container").children().css("opacity", 0);
      changeColor(nc);
      $(this).dequeue();
    })
    .queue(function() {
      nh = calcNewHeight(nq);
      $(".quote-container, #new-quote").animate({
        height: nh / 16 + "rem",
      }, {
        duration: 1000,
        queue: false
      });

      $(".quote-container").animate({
        padding: "2.5rem"
      }, {
        duration: 1000,
        queue: false
      });

      $("#new-quote").animate({
        padding: "2.5rem .75rem"
      }, {
        duration: 1000,
        queue: false
      });
      $(this).dequeue();
    })
    .queue(function() {
      updateText($(".quote-container"), nq);
      $(".quote-container").children().fadeTo(750, 1);
      $(this).dequeue();
      animating = false;    // When the animation is done, set animating back to false.
    })
};