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

我正试图弄明白如何在列表fadeInUp中创建列表项，每个列表项的延迟为100ms

到目前为止，我已经做到了这一点，它确实应用了类来设置动画，并且每个列表项的属性值增加了100ms。但当我悬停时，所有项目都会同时消失，即使应用了数据wow延迟，并且我的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++;
    });
});

有舱航行






@关键帧淡入淡出{
0% {
不透明度：0；
-webkit转换：translate3d（0,20%，0）；
转换：translate3d（0,32%，0）；
}
100% {
不透明度：1；
-webkit转换：无；
转化：无；
}
}
法代努普先生{
-webkit动画名称：fadeInUp；
动画名称：法德努普；
}
//下拉菜单动画
$（“#主菜单>li>a”）。打开（“悬停焦点”，函数（）{
无功电流=0；
$（“.sub-menu.menu项”）。每个（函数（）{
$（this.addClass（“动画魔兽世界fadeInUp”）；
$（this）.attr（“数据延迟”，当前+00ms）；
电流++；
});
});

我认为在添加延迟数据属性后需要初始化

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

---

演示：

你能播更多的代码吗？耶：）我添加了html和css。我用Wordpress，你救了我的命！这是完美的：）你能解释一下为什么你需要在函数中初始化wow.js，这样我才能从中学习吗？我把它放在身体末端标签之前。干杯，因为您需要在每次更改设置时运行动画，如添加数据属性、动画类。为此，您需要再次调用

init

。好的，酷：）我明白了。有没有办法避免双重影响？当我悬停我的链接，它的工作很好，但当下降到下拉列表，骗子再次。我修复了问题：）再次感谢你。

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