HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery filter animated</title>
  <style>
    #stage { border: 2px dashed #64748b; padding: 12px; margin-bottom: 12px; }
    #outside { padding: 12px; background: #f1f5f9; }
    div.box {
      width: 70px; height: 70px; margin: 6px;
      background: #bfdbfe; display: inline-block;
      vertical-align: top;
    }
    div.box.busy { outline: 3px solid #dc2626; background: #fecaca; }
  </style>
</head>
<body>
  <div id="stage">
    <div class="box" id="a">A</div>
    <div class="box" id="b">B</div>
  </div>
  <div id="outside">
    <div class="box" id="c">C (outside)</div>
  </div>
  <button type="button" id="mark">Mark animating in #stage</button>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    function pulse(el) {
      $(el).fadeToggle(1200, function() { pulse(el); });
    }
    pulse("#a");
    pulse("#c");
    $("#mark").on("click", function() {
      $(".box").removeClass("busy");
      $("#stage").find("div").filter(":animated").addClass("busy");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .filter(':animated') — scoped (Try It)