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) {&nbsp; $(this).delay(1500 + (100 * i)).fadeIn();});.tooltip {&nbsp; 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">&nbsp; <div class="tooltip-pad">&nbsp; &nbsp; <div class="tooltip-info">Introduction</div>&nbsp; </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">&nbsp; <div class="tooltip-pad">&nbsp; &nbsp; <div class="tooltip-info">Auditorium</div>&nbsp; </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">&nbsp; <div class="tooltip-pad">&nbsp; &nbsp; <div class="tooltip-info">Main Hall</div>&nbsp; </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">&nbsp; <div class="tooltip-pad">&nbsp; &nbsp; <div class="tooltip-info">Partner Hall</div>&nbsp; </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">&nbsp; <div class="tooltip-pad">&nbsp; &nbsp; <div class="tooltip-info">Sign In</div>&nbsp; </div></div>附带说明一下，在属性中放置 HTML 时要小心。它可能会导致某些浏览器出现问题。我建议对其进行 HTML 编码。另外tooltip它不是一个标准的 HTML 属性。如果您想在元素中存储自定义数据，请使用data属性，例如。data-tooltip="..."。