FadeIn тот же div, но другой номер

Question

У меня есть простая функция fadeIn, которая исчезает в подсказке 1, затем 2, затем 3 и т. Д. c ... Есть ли более динамические c и лучший программный способ сделать это? На данный момент вот как у меня это работает: - 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, вы можете использовать общий класс для всех элементов всплывающей подсказки. Затем вы можете l oop через этот класс и добавить 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="...".