Question

我正在试图找出如何在列表fadeInUp中制作列表项目，每个列表项目延迟100毫秒。

到目前为止，我已经做了这个，它确实应用了这些类来为它设置动画，并且每个列表项的值增加了100ms。但是当我悬停时，所有项目同时都是fadeInUp，即使应用了数据哇延迟，我的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

我认为您需要在添加延迟数据属性后初始化wow.js。您也不需要添加animated课程，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

Answer 2

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

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

2 个答案: