Jquery on hover and focus apply classes plus data-delay iteration

Question

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.

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.

<nav id="site-navigation" class="main-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <h1 class="nocontent outline">Hoved navigation</h1>
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'crafthouse-agency' ); ?></button>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
    <?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_id' => 'secondary-menu' ) ); ?>

    <ul class="social-share-section">
        <li>
            <a href="#" class="social-share">
                <svg class="facebook-header">
                    <use xlink:href="#facebook"></use>
                </svg>
                <span class="share-text">Del "" <span class="screen-reader-text">på Facebook</span></span>
            </a>
        </li>
        <li>
            <a href="#" class="social-share">
                <svg class="linkedin-header">
                    <use xlink:href="#linkedin"></use>
                </svg>
                <span class="share-text">Del "" <span class="screen-reader-text">på LinkedIn</span></span>
            </a>
        </li>
    </ul>
</nav><!-- #site-navigation -->

@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 > li > 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++;
    });
});

Ye :) I added the html and css. I use Wordpress. – Mikkel Madsen May 29 '15 at 22:24 — Mikkel Madsen, May 29 '15 at 22:24

score 2 · Accepted Answer · answered May 29 '15 at 22:31

2

I think you need to initialize wow.js after you add delay data attributes. You also don't need to add animated class, wow will add it when initialized:

$("#primary-menu > li > a").on("click focus", function() {
    var current = 0;
    $(".sub-menu .menu-item").each(function() {
        $(this).addClass("wow fadeInUp").attr("data-wow-delay", current + "00ms");
        current++;
    });
    new WOW().init();
});

Demo: http://plnkr.co/edit/A7qpjfn33leNbjOZH8J0?p=preview

answered May 29 '15 at 22:31

dfsq

191,768
25
236
258

You saved my life! This works flawless :) Can you try explain why you need to initialize the wow.js in the fucntion so I can learn from this? I had it before the body end tag. Cheers – Mikkel Madsen May 29 '15 at 22:36
Because you need to run animation every time you change set up, like add data properties, animation class. For this you need to call `init` again. – dfsq May 29 '15 at 22:43
Okay cool :) I see. Is there a way to avoid double effect? When i hover my link, it works nice, but when go down in the dropdown, the trickers again. – Mikkel Madsen May 29 '15 at 22:45
I fixed the problem:) Thank you once again. – Mikkel Madsen May 29 '15 at 23:36

score 1 · Answer 2 · answered May 29 '15 at 22:09

1

 $("#primary-menu > li > a").on("hover focus", function(){
    $(".sub-menu .menu-item").each(function(i) {
    $(this).delay((i++) * 100).fadeTo(1000, 1); })
    });
    });

answered May 29 '15 at 22:09

Ritesh Karwa

2,196
1
13
17

Jquery on hover and focus apply classes plus data-delay iteration

2 Answers2