第一次悬停div时，鼠标悬停不会正确转换

时间：2018-03-11 15:07:42

标签： javascript jquery css css3

我在淡入菜单时遇到了一些麻烦。我正在使用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类会被添加（也使用addClass）到主#menu div。

有趣的是，当菜单打开并且您第二次或第三次等待汉堡（#bk）时，它会正常工作，并且顺利过渡，但不会你首先将它推上去。我无法弄明白。

＆＃13;
＆＃13; 
// 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();


});
＆＃13; 
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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

JsFiddle https://jsfiddle.net/hkbv0xwq/5/

1 个答案:

答案 0 :(得分：0)

首先：尝试将CS​​S转换用于这样的简单动画，它将使您的工作更轻松。

第二：我不确定这是否是您问题的理想解决方案，但我可以说您第一次没有获得动画的原因是因为black-close在您之前从未出现在DOM中mouseover burger因此它在第一次尝试时没有采用其转换功能。

要解决此问题，您应该执行以下操作：

  1. 最初使用.menu-close
    2. 添加#menu
  2. 在menu.addClass
    3. 的完整功能中删除它
  3. 使.black-close样式独立于.is-open

    4. 检查以下代码段以进行参考。

    ＆＃13;
    ＆＃13; 
    // 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', function(){
              menu.removeClass('black-close');
            });
            header.addClass('menu-open');
            header.addClass('transparent');
            heading.addClass('is-open');
            subMenuItems.addClass('is-open');
            menuOpen = true;
        } else {
            menu.removeClass('is-open');
            menu.addClass('black-close');
            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();


});
    ＆＃13; 
    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.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
}
    ＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="black-close">
<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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    希望这有帮助

相关问题
最新问题