添加/删除类上的动画
[英]Animation on add/remove class
问题描述
我正在尝试在addclass和removeclass上设置动画，但是不幸的是它无法正常工作。
这就是我的代码：
jQuery(function($) {
$("#top").on("mouseenter", function() {
$(this).find(".nav-parent").removeClass("hide4e");
$(this).find("footer").removeClass("hide4e");
}).on("mouseleave", function() {
$(this).find(".nav-parent").addClass("hide4e");
$(this).find("footer").addClass("hide4e");
});
});
我找到2个解决方案-
- 与jQuery的UI-不工作
- 与csstransions也无法正常工作
jQuery(function($) { $("#top").on("mouseenter", function() { $(this).find(".nav-parent").removeClass("hide4e"); //$(this).find("footer").removeClass("hide4e"); }).on("mouseleave", function() { $(this).find(".nav-parent").addClass("hide4e"); //$(this).find("footer").addClass("hide4e"); }); });
.nav-parent { background-color: rgba(0, 0, 0, 0.9); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .hide4e { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <body id="top" class="album-template-default single single-album postid-51 apollo_validation_on wide wp-3_8"> <!--iw--> <div id="iw-container"> <div id="root"> <div id="whole-bg-image"> <div id="album-controls"> <span id="prevslide" class="arrow-left"></span> <span id="play-button" class="action" data-play="Play" data-pause="Pause"></span> <span id="nextslide" class="arrow-right"></span> </div> </div> <div id="header-container" class="glass"> <header id="header" class="glass"> <div class="add-ons clearfix"> <div class="content"> </div> </div> <!-- STACKOVERFLOW NEEDED START --> <div class="nav-parent"> <nav id="access" role="navigation"> <a id="logo" href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>index.html" title="AlexValtchev.com – Alex Valtchev Photography" rel="home"><img src="https://vimastudio.com/images/vsLogo.png" alt="AlexValtchev.com – Alex Valtchev Photography" /></a> <h3 class="assistive-text">Main menu</h3> <a class="assistive-text" href="#begin-of-content" title="Skip to primary content">Skip to primary content</a> <a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a> <div class="menu-container"> <div class="mobtn"></div> <div id="iw-header-button"><div class="img"></div></div> <ul id="menu-menuen-1" class="top-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-35"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>index.php"><span>Начало</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>about.php"><span>За нас</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>portfolio.php"><span>Портфолио</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-32"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>blog.php"><span>Блог</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>allclients.php"><span>Клиенти</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>partners.php"><span>Партньори</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>contacts.php"><span>За контакти</span></a></li> </ul> </div> </nav><!-- #access --> </div> <!-- STACKOVERFLOW NEEDED END --> </header> </div> <!-- /#header-container --> <div id="mid" class="clearfix full-width"> <div class="seo-album"> <div class="brick"> <div></div> </div> </div> <div id="album-things" class="load-item"> <em id="prev-thumb"></em> <em id="next-thumb"></em> <!--Slide captions displayed here--> <div class="desc-and-list"> <div id="slide-text"> <div class="inner"> <h1 class="caption"></h1> <div class="descpription"></div> <span id="close-text" title="Hide description"></span> </div> </div> <div id="text-controls" class="position-holder"> <span id="show-text" class="action" title="Show description"></span> </div> </div> <!--Thumbs--> <div id="other-albums"></div> <div id="thumb-tray"> <div class="inner"> <span id="prev-tray-thumb" class="arrow-left"></span> <span id="next-tray-thumb" class="arrow-right"></span> </div> </div> <!--Thumb Tray button--> <div id="tray-button" title="Show thumbnails"></div> <!--Time Bar--> <div id="progress-back"> <div id="progress-bar"></div> </div> </div> <div id="album-icons" class="album-icons"> <a class="info-ico" title="Show description"></a> </div> </div> <!-- #mid --> <style> .nav-parent { transition: opacity 1s, height 0s 1s; } .hide4e { display: none; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } </style> <script> jQuery(function($) { $("#top").on("mouseenter", function() { $(this).find(".nav-parent").removeClass("hide4e"); $(this).find("footer").removeClass("hide4e"); }).on("mouseleave", function() { $(this).find(".nav-parent").addClass("hide4e"); $(this).find("footer").addClass("hide4e"); }); }); </script>
html乱七八糟，但所需的部分在和之间
那么还有其他解决方案吗？
谢谢！
1 个解决方案
解决方案1
0 已采纳 2018-10-18 15:54:38
好的，因此我无法为显示设置动画：无，因此我使用了可见性：隐藏； 不透明度：0； 隐藏元素。 谢谢你们！
for循环函数内部的嵌套函数 添加/删除类| 关键帧动画
[英]Nested function inside for loop function | add/remove class | keyframes animation
使用 CSS Animation，如果我们需要再次动画，必须删除 class 并重新添加？
[英]Using CSS Animation, if we need to animate it again, must be remove the class and add it back?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.