【发布时间】：2018-03-12 00:05:03
【问题描述】：
我在菜单中的淡入时遇到了一些问题。我正在使用 jQuery 来 mouseover 和 mouseout，这将在菜单中添加一个类以使其更暗。
当菜单打开时，keyframe 动画会运行，它将菜单的背景设置为黑色，然后一直运行直到橙色。
@keyframes menuinfade {
0% {
background-color: #000;
}
50% {
background-color: #000;
}
100% {
background-color: #e07a18;
}
}
#menu.is-open {
opacity: 1;
visibility: visible;
animation-delay: 2s;
animation: menuinfade 6.2s;
-moz-animation: menuinfade 6.2s;
-webkit-animation: menuinfade 6.2s;
-o-animation: menuinfade 6.2s;
}
我希望当网站的导航汉堡悬停时，菜单的背景会发生变化。我正在使用addClass/removeClass 执行此操作。
burger.on('mouseover', function () {
if (menuOpen == true) {
menu.addClass('black-close');
}
});
burger.on('mouseout', function () {
if (menuOpen == true) {
menu.removeClass('black-close');
}
});
当您将鼠标悬停在汉堡上时打开菜单后，动画会变得不流畅。它从完成的橙色关键帧状态跳转到黑色悬停addClass。我在 CSS 上确实有一个 transition：
#menu.is-open.black-close {
background: #000;
transition: 340ms ease
}
当菜单打开时，一个.is-open 类被添加到主#menu div 中（也使用addClass）。
有趣的是，当菜单打开并且您将汉堡 (#bk) 悬停第二次或第三次等时，它可以正常工作，并且应该平稳过渡，但当您 首先把它挂起来。我想不通。
// Nav
function theNavigationSystem() {
// Menu Variables
var menu = $('#menu');
var header = $('header');
var burger = $('header button#bk');
var heading = $('nav > ul .column .nav__heading__title');
var subMenuItems = $('nav > ul .column.site-map');
// Full Screen Setup
menuOpen = false;
burger.on('click', function () {
if (!menuOpen) {
menu.addClass('is-open');
header.addClass('menu-open');
header.addClass('transparent');
heading.addClass('is-open');
subMenuItems.addClass('is-open');
menuOpen = true;
} else {
menu.removeClass('is-open');
header.removeClass('menu-open');
header.removeClass('transparent');
heading.removeClass('is-open');
subMenuItems.removeClass('is-open');
menuOpen = false;
}
});
burger.on('mouseover', function () {
if (menuOpen == true) {
menu.addClass('black-close');
}
});
burger.on('mouseout', function () {
if (menuOpen == true) {
menu.removeClass('black-close');
}
});
}
$(document).ready(function () {
// Nav
theNavigationSystem();
});header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 25px 0;
transition: all 1000ms cubic-bezier(0.230, 0.950, 0.100, 1.000);
width: 100%;
background: #fff;
z-index: 100
}
header.transparent {
background: 0
}
header > .constraint, .content-grid.up-next .panel-headings, main.full > .constraint {
display: flex;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
}
header #bk {
width:20px;
height:20px;
position: absolute;
right: 50px;
z-index: 1000
}
#menu {
position: fixed;
overflow-y: auto;
overflow-x: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #e07a18;
color: #fff;
transition: all 1000ms cubic-bezier(0.230, 0.950, 0.100, 1.000);
visibility: hidden;
opacity: 0;
z-index: 20
}
@keyframes menuinfade {
0% {
background-color: #000;
}
50% {
background-color: #000;
}
100% {
background-color: #e07a18;
}
}
#menu.is-open {
opacity: 1;
visibility: visible;
animation-delay: 2s;
animation: menuinfade 6.2s;
-moz-animation: menuinfade 6.2s;
-webkit-animation: menuinfade 6.2s;
-o-animation: menuinfade 6.2s;
}
#menu.is-open.black-close {
background: #000;
transition: 340ms ease
}
#menu #main-navigation {
margin: 210px 50px 0 16.785%;
padding-bottom: 50px
}
#menu #main-navigation > nav > ul .column {
width: 23.6%
}
nav > ul .column span {
display: block
}
nav > ul .column span:first-child:not(.nav__heading__title) {
margin-top: 85px;
margin-top: calc( 50px + 1em + 20px);
margin-bottom: 50px;
font-size: 18px;
font-size: 1.83rem;
font-weight: 500;
letter-spacing: 1px;
letter-spacing: .036rem;
text-transform: capitalize
}
nav > ul .column span:first-child {
position: relative
}
nav > ul .column span:first-child::after {
content:"\0020";
position: absolute;
width: 25px;
height: 3px;
background: #fff;
bottom: -12px;
left: 0;
}
nav > ul .column .nav__heading__title {
margin-bottom: 50px;
font-size: 20px;
font-size: 2rem;
font-weight: 500;
opacity: 0;
transition: 550ms ease;
}
nav > ul .column .nav__heading__title.is-open {
opacity: 1;
transition-delay: 503ms
}
nav > ul .column.site-map {
opacity: 0;
transition: 750ms ease;
}
nav > ul .column.site-map.is-open {
opacity: 1;
transition-delay: 1.1s
}
#menu #footer {
position: fixed;
bottom: 50px;
left: 50px;
width: 16.5%
}
#menu a, #menu a:visited {
color: inherit;
text-decoration: none
}
nav ul > .column a {
display: block
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<section id="footer">
<ol>
<li>Address
</li>
<li>Next Address
</li>
<li>SX-CC SL9 99S
</li>
<li class="contact-methods">
<a href="tel:00000000">000000000
</a>
</li>
<li>
<a href="">Email Us
</a>
</li>
</ol>
</section>
<section id="main-navigation">
<nav>
<ul>
<li class="column">
<span class="nav__heading__title">Site Map
</span>
<a class="nav-areas" href="/">Homepage
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Projects
</span>
<a class="nav-areas" href="/">The Beldi
</a>
<a class="nav-areas" href="/projects/belgravia/">Belgravia House
</a>
<a class="nav-areas" href="/">Sahar
</a>
<a class="nav-areas" href="/">Broonstone
</a>
<a class="nav-areas" href="/">London Road
</a>
<a class="nav-areas" href="/">Tamon
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Online
</span>
<a class="nav-areas" href="/">Facebook
</a>
<a class="nav-areas" href="/">Instagram
</a>
</li>
<li class="column site-map">
<span class="nav__heading">Find Out More
</span>
<a class="nav-areas" href="/contact/">Contact Us
</a>
<a class="nav-areas" href="/about/">Our History
</a>
</li>
</ul>
</nav>
</section>
</div>
<header>
<div class="constraint">
<div class="logo">
</div>
<button id="bk">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>JsFiddle https://jsfiddle.net/hkbv0xwq/5/
【问题讨论】：
-
到底为什么会有人考虑使用 jQuery 来处理
mouseover和mouseout相关的样式吗？ CSS 有:hover。
标签： javascript jquery css