FadeIn same div but different number

Question

I have a simple fadeIn function, that fades in Tooltip 1, then 2, then 3 etc... Is there a more dynamic and a better programmatically way to do this? At the moment this is how I have it working:- HTML

    
        
            
                Introduction
              
        
    

    
        
            
                Auditorium
              
                  
      

    
        
            
                Main Hall
              
                      
    

    
        
            
                Partner Hall
              
                  
    

    
        
            
                Sign In

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(){}); 
                    });                     
                });
            });             
        });
    });
});

Thanks for your help!

Rory McCrossan · Accepted Answer

To achieve this more efficiently, in terms of the JS code structure, you can use a common class on all the tooltip elements. You can then loop through this class and add a delay() to each element, incremented by an extra 100ms on each iteration, before calling fadeIn() on them. Try this:

$(".tooltip").each(function(i) {
  $(this).delay(1500 + (100 * i)).fadeIn();
});

.tooltip {
  display: none;
}



  
    Introduction
  


  
    Auditorium
  


  
    Main Hall
  


  
    Partner Hall
  


  
    Sign In

As a side note, be careful of placing HTML in attributes. It can cause issues in some browsers. I'd suggest HTML-encoding it. In addition tooltip isn't a standard HTML attribute. If you want to store custom data in an Element, use data attributes, eg. data-tooltip="...".

FadeIn same div but different number

Answers (1)

Related Questions