html - 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>

    <div class="tooltips tooltip5" 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>

JQuery

$('.tooltip1').delay(1500).fadeIn(function(){
    $('.tooltip2').delay(100).fadeIn(function(){
        $('.tooltip3').delay(100).fadeIn(function(){
            $('.tooltip4').delay(100).fadeIn(function(){
                $('.tooltip5').delay(100).fadeIn(function(){
                    $('.tooltip6').delay(100).fadeIn(function(){
                        $('.tooltip7').delay(100).fadeIn(function(){}); 
                    });                     
                });
            });             
        });
    });
});

感谢您的帮助!

Answer 1

为了更有效地实现这一点，就 JS 代码结构而言，您可以在所有工具提示元素上使用公共(public)类。然后，您可以循环访问此类并添加 delay()对于每个元素，增加一个额外的 100ms在每次迭代中，在调用 fadeIn() 之前在他们。试试这个:

$(".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="..." .