title: Jquery on hover and focus apply classes plus data-delay iteration
body: <p>I'm trying to figure out how I can make my list items in a list fadeInUp with a delay on 100ms per list item.</p>
  
  <p>I have made this so far and it does apply the classes to animate it and the attribute with a value of 100ms increase per list item. But when I hover, all items fadeInUp at the same time, even though data-wow-delay is applied and i have no console error from my wow.js library. Any ideas? Cheers.</p>
  
  <pre><code>&lt;nav id="site-navigation" class="main-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"&gt;
      &lt;h1 class="nocontent outline"&gt;Hoved navigation&lt;/h1&gt;
      &lt;button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"&gt;&lt;?php esc_html_e( 'Primary Menu', 'crafthouse-agency' ); ?&gt;&lt;/button&gt;
      &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary', 'menu_id' =&gt; 'primary-menu' ) ); ?&gt;
      &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'secondary', 'menu_id' =&gt; 'secondary-menu' ) ); ?&gt;
  
      &lt;ul class="social-share-section"&gt;
          &lt;li&gt;
              &lt;a href="#" class="social-share"&gt;
                  &lt;svg class="facebook-header"&gt;
                      &lt;use xlink:href="#facebook"&gt;&lt;/use&gt;
                  &lt;/svg&gt;
                  &lt;span class="share-text"&gt;Del "" &lt;span class="screen-reader-text"&gt;på Facebook&lt;/span&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" class="social-share"&gt;
                  &lt;svg class="linkedin-header"&gt;
                      &lt;use xlink:href="#linkedin"&gt;&lt;/use&gt;
                  &lt;/svg&gt;
                  &lt;span class="share-text"&gt;Del "" &lt;span class="screen-reader-text"&gt;på LinkedIn&lt;/span&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;&lt;!-- #site-navigation --&gt;
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 20%, 0);
      transform: translate3d(0, 32%, 0);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  
  // Dropdown menu animation
  $("#primary-menu &gt; li &gt; a").on("hover focus", function(){
      var current = 0;
      $(".sub-menu .menu-item").each(function() {
          $(this).addClass("animated wow fadeInUp");
          $(this).attr("data-wow-delay", current+"00ms");
          current++;
      });
  });
  </code></pre>