我正在尝试在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(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在这里很乱，但是所需的部分在和之间
那么还有其他解决方案吗？
谢谢！
答案 0 :(得分：0)
好的，所以我无法为显示设置动画：无，所以我使用了可见性：隐藏；不透明度：0；隐藏元素。谢谢大家！