JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

ul { width : 120px }

ul li a { display: block; padding: 10px; border-bottom: 1px solid #444; background: #333; color: #fff; font-family: Arial, sans-serif; font-size: 11px; text-decoration: none }

ul li ul { height : 0; overflow: hidden }

JavaScript

$(function() {

      var speed = 500;
      
      $('ul li ul li a').css({ opacity : 0 })
      
    $('ul li').hover(function() {
        
        var subHeight = calcHeight( $('li', this) );
        
        $('ul', this).delay(500).animate({ height : subHeight }, { duration : speed, queue : false });
        
        var start = 0;
        
        var liCount = $('li a', this).length;
        
        var delay;
        
        $('li a', this).each(function() {
            
            start++;
            delay = start * liCount / speed;
            $(this).append('Delayed by: ' + delay)
            customFadeIn( $(this), delay, speed );
            
        });
        
    }, function() {
        
        $('ul', this).stop().animate({ height : 0 }, { duration : speed, queue : false });
        
        var liCount = $('li a', this).length + 1;
       
        var start = liCount;
        
        var delay;
        
        $('li a', this).each(function() {
            
            start = start - 1;
            delay = speed / (start * liCount) ;
            customFadeOut( $(this), delay, speed );
            
        });
        
    });
    
     function calcHeight($el) {
        
            var base = 0;
            
            $el.each(function() {
            
                base += $(this).outerHeight(true);
                
            });
            
            return base;
      }
      
      function customFadeIn($el, delay, speed) {
          $el.f = setTimeout((function() {
              $el.stop().animate({ opacity : 1 }, { duration : speed, queue: false })
          }), delay);
      }
        
      function customFadeOut($el, delay, speed) {
          $el.f = setTimeout((function() {
              $el.stop().animate({ opacity : 0 }, { duration : speed, queue: false })
          }), delay);
      }
    
});