我正在使用bootstrap 5，我想淡入/淡出一个特定的div元素。jQuery有一个名为fadeToggle()的漂亮函数来做这件事，所以我想我可能会使用它。
预期行为为：

• div元素最初使用d-none类隐藏
• 单击按钮链接以切换div的淡入/淡出

然而，Bootstrap的d-none似乎不能很好地与jQuery的fadeToggle()配合使用，最终发生的是div元素在第一次点击时没有淡入。在按钮链接上的后续点击将正确地淡入，因为d-none类永远不会被添加回来，所以jQuery接管了元素的隐藏/显示。淡出工作正常。
以下是一个示例：

<div class="container">
  <div class="row">
    <div class="col">
     <a href="#">Click me</a>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="one d-none">
       1 of 3
      </div>
    </div>
    <div class="col">
      <div class="two">
       2 of 3
      </div>
    </div>
    <div class="col">
      <div class="three">
       3 of 3
      </div>
    </div>
  </div>  
</div>

jquery脚本：

$("a").click(function() {
    $(".one").fadeToggle(1200, function() {
            $(".one").toggleClass("d-none") 
    });
});

这里有一个活生生的例子，只要刷新页面后，第一次点击，看看我的意思是弹出，而不是褪色不正确：
https://codepen.io/iosub/pen/oNdLzgV

如何让jQuery与Bootstrap的d-none类配合良好，以便可以无缝地淡入/淡出？

• 作为一个额外的问题 *，有没有一个共同使用jquery和bootstrap的约定？我觉得当一个元素被“隐藏”时，使用d-none这样的显示属性会扰乱jquery的预期，导致像上面这样的奇怪行为。jquery应该接管控制这些显示属性，还是应该在jquery完成后再添加bootstrap类？（例如，在fadeToggle()淡出后重新添加d-none，并在fadeToggle()淡入时删除它。目前，它只是删除整个d-none类并将控制权交给jquery）