Jquery 悬停和焦点应用类加上数据延迟迭代

Question

我正在尝试弄清楚如何使列表中的列表项在每个列表项延迟 100 毫秒的情况下淡入淡出。

到目前为止，我已经做到了这一点，它确实应用了类对其进行动画处理，并且每个列表项的属性值增加 100 毫秒。但是当我悬停时，所有项目同时 fadeInUp，即使应用了 data-wow-delay 并且我的 wow.js 库没有控制台错误。有任何想法吗？干杯。

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

Answer 1

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

Answer 2

我认为您需要在添加延迟数据属性后初始化 wow.js。你也不需要加animated class, wow会在初始化的时候加上:

$("#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();
});

演示： http://plnkr.co/edit/A7qpjfn33leNbjOZH8J0?p=preview

Jquery 悬停和焦点应用类加上数据延迟迭代

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

javascript

css

jquery

animation

wow.js

Jquery 悬停和焦点应用 类 加上数据延迟迭代

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

javascript

css

jquery

animation

wow.js

Jquery 悬停和焦点应用类加上数据延迟迭代