FadeIn 相同的 div 但不同的数字

Question

我有一个简单的 fadeIn 函数，它会淡入工具提示 1，然后淡出 2，然后淡出 3 等...是否有更动态且更好的编程方式来执行此操作？目前，这就是我的工作方式：- HTML    <div class="tooltips tooltip1" tooltip="<h2>Introduction <div>Area</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button red-btn'><a href='#'>Watch Video</a></div>" tooltip-position="top">        <div class="tooltip-pad">            <div class="tooltip-info">                Introduction            </div>          </div>    </div>    <div class="tooltips tooltip2" tooltip="<h2>Auditorium <div>Area-in</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button purple-btn'><a href='#'>View Auditorium Area</a></div>" tooltip-position="top">        <div class="tooltip-pad">            <div class="tooltip-info">                Auditorium            </div>          </div>              </div>      <div class="tooltips tooltip3" tooltip="<h2>Main Hall Area <div>Video</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button'><a href='#'>View Main Hall Area</a></div>" tooltip-position="top">        <div class="tooltip-pad">            <div class="tooltip-info">                Main Hall            </div>          </div>                  </div>    <div class="tooltips tooltip4" tooltip="<h2>Experience <div>Area</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button black-btn'><a href='#'>View Experience Area</a></div>" tooltip-position="top">        <div class="tooltip-pad">            <div class="tooltip-info">                Partner Hall            </div>          </div>              </div>

Answer 1

为了更有效地实现这一点，就 JS 代码结构而言，您可以在所有工具提示元素上使用公共类。然后，您可以循环遍历此类，并向每个元素添加 a ，并在每次迭代时delay()增加一个额外值，然后再调用它们。尝试这个：100msfadeIn()

$(".tooltip").each(function(i) {

  $(this).delay(1500 + (100 * i)).fadeIn();

});

.tooltip {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tooltip" tooltip="<h2>Introduction <div>Area</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button red-btn'><a href='#'>Watch Video</a></div>" tooltip-position="top">

  <div class="tooltip-pad">

    <div class="tooltip-info">Introduction</div>

  </div>

</div>

<div class="tooltip" tooltip="<h2>Auditorium <div>Area-in</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button purple-btn'><a href='#'>View Auditorium Area</a></div>" tooltip-position="top">

  <div class="tooltip-pad">

    <div class="tooltip-info">Auditorium</div>

  </div>

</div>

<div class="tooltip" tooltip="<h2>Main Hall Area <div>Video</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button'><a href='#'>View Main Hall Area</a></div>" tooltip-position="top">

  <div class="tooltip-pad">

    <div class="tooltip-info">Main Hall</div>

  </div>

</div>

<div class="tooltip" tooltip="<h2>Experience <div>Area</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button black-btn'><a href='#'>View Experience Area</a></div>" tooltip-position="top">

  <div class="tooltip-pad">

    <div class="tooltip-info">Partner Hall</div>

  </div>

</div>

<div class="tooltip" tooltip="<h2>Sign <div>In</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button purple-btn'><a href='#'>Sign In</a></div>" tooltip-position="top">

  <div class="tooltip-pad">

    <div class="tooltip-info">Sign In</div>

  </div>

</div>

附带说明一下，在属性中放置 HTML 时要小心。它可能会导致某些浏览器出现问题。我建议对其进行 HTML 编码。另外tooltip它不是一个标准的 HTML 属性。如果您想在元素中存储自定义数据，请使用data属性，例如。data-tooltip="..."。