我试图弄清楚如何在每个列表项延迟 100 毫秒的情况下使列表项在列表 fadeInUp 中。
到目前为止,我已经做到了这一点,它确实应用了类来对其进行动画处理,并且每个列表项的值为 100 毫秒的属性会增加。但是当我悬停时,所有项目同时淡入淡出,即使应用了 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++;
});
});