试图找出用jQuery（或vanilla JS）过滤内容的正确方法。
我有药丸和内容的基础知识的html，css和js.
它在技术上是可行的，但jquery代码不优雅/重复，淡入/淡出过滤效果超级不稳定而不是平滑。
我有一个codepen，开始得到它的权利，但淡出/在是一个混乱，特别是如果它是可见的，然后仍然可见时，过滤，有一个奇怪的延迟和重复淡出/在发生。
codepen

document.querySelectorAll(".pill").forEach((pill) => {
  pill.addEventListener("click", () => {
    document.querySelectorAll(".pill-selected").forEach((p) => {
      p.classList.remove("pill-selected");
    });
    pill.classList.add("pill-selected");
  });
});

$("#all").click(function() {
  $("#case-studies > *").fadeOut(300, function() {
    $("#case-studies > *").fadeIn(300);
  });
});

$("#ui").click(function() {
  $("#case-studies > *").fadeOut(300, function() {
    $("[data-tag~='ui']").fadeIn(300);
  });
});

$("#ux").click(function() {
  $("#case-studies > *").fadeOut(300, function() {
    $("[data-tag~='ux']").fadeIn(300);
  });
});

$("#product").click(function() {
  $("#case-studies > *").fadeOut(300, function() {
    $("[data-tag~='product']").fadeIn(300);
  });
});

body {
  background: #eee;
}

ul {
  margin-top: 2em;
}

ul li {
  border-radius: 2px;
  display: inline;
  background: #ccc;
  padding: 0.7em 1em;
  cursor: pointer;
  cursor: hand;
}

#divs {
  margin-left: 3.5em;
}

div span {
  margin: 3px;
  padding: 1em 1.5em;
  border-radius: 4px;
  color: #ffffff;
  background: #272727;
  font: bold 2em Helvetica, Arial, sans-serif;
  float: left;
  /* sits them next to each other */
}

.pill {
  font-size: 14px;
  font-family: system-ui;
  padding: 0.5em 1em;
  margin: 0.25em;
  border-radius: 1em;
  border: none;
  outline: none;
  background: #dddddd;
  cursor: pointer;
}

.pill:not(.pill-selected):hover {
  background: #cccccc;
}

.pill-selected {
  background: #ff0055;
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters">
  <button id="all" class="pill pill-selected" type="button">All</button>
  <button id="ui" class="pill" type="button">UI</button>
  <button id="ux" class="pill" type="button">UX</button>
  <button id="product" class="pill" type="button">Product</button>
</div>

<div id="case-studies">

  <div data-tag="ui ux product">
    <span>1</span>
  </div>
  <div data-tag="ui ux">
    <span>2</span>
  </div>
  <div data-tag="ui ux">
    <span>3</span>
  </div>
  <div data-tag="ux product">
    <span>4</span>
  </div>

  <div data-tag="ui product">
    <span>5</span>
  </div>
  <div data-tag="product">
    <span>6</span>
  </div>
  <div data-tag="ui">
    <span>7</span>
  </div>
  <div data-tag="ux">
    <span>8</span>
  </div>

  <div data-tag="game">
    <span>9</span>
  </div>
</div>

我试图让这个工作，但我不知道如何适当地针对个人卡的数据标签显示，而其他人隐藏。

$(".filters button").click(function () {
  $(".case-studies").hide();
  $(".case-studies" + $(this).attr("data-tag")).show();
 });

但我只是一个设计师，不是FEMaven，任何帮助都非常感谢。