Question

所以问题对我来说很奇怪，我甚至不知道如何谷歌它甚至我尝试了1-2个小时......

'mouseenter'和'mouseleave'上的动画效果很好。问题是，在我点击这个菜单按钮两次以将其更改为“X”并恢复为3个破折号后，'mouseenter'和'mouseleave'的动画不起作用..

对于我破碎的英语也很抱歉.. x.x

这是一段代码：

$(document).ready(function() {

  /* Slide up/down menu bars */

  $('.toggle-nav').on("mouseenter", function moveUp() {
    /* Stuff to do when the mouse enters the element */
    $('.line1').css({
      top: '-7px',
      opacity: '0'
    });
    setTimeout(function() {
      $('.line2').css({
        top: '0px'
      });
    }, 70);
    setTimeout(function() {
      $('.line3').css({
        top: '7px'
      });
    }, 140);
    setTimeout(function() {
      $('.line4').css({
        top: '14px',
        opacity: '1'
      });
    }, 210);
  });

  $('.toggle-nav').on("mouseleave", function moveDown() {
    /* Stuff to do when the mouse leaves the element */
    $('.line4').css({
      top: '21px',
      opacity: '0'
    });
    setTimeout(function() {
      $('.line3').css({
        top: '14px'
      });
    }, 70);
    setTimeout(function() {
      $('.line2').css({
        top: '7px'
      });
    }, 140);
    setTimeout(function() {
      $('.line1').css({
        top: '0px',
        opacity: '1'
      });
    }, 210);
  });

  /* Make it show/hide nav-menu */
  $('.icon-container').on('click', function() {
    /* Act on the event */
    $('.nav-menu').toggle();
  });

  /* Make it X */
  $('.toggle-nav').on('click', function() {
    $('.toggle-nav').toggleClass('test');

    if ($('.toggle-nav').hasClass('test')) {
      $('.toggle-nav').off('mouseenter');
      $('.toggle-nav').off('mouseleave');
      $('.line').css({
        top: "+7px"
      });
      $('.line2').css({
        transform: "rotate(-45deg)"
      });
      $('.line1').css({
        transform: "rotate(-45deg)",
        top: "7px",
        opacity: '0'
      });
      $('.line3').css({
        transform: "rotate(45deg)"
      });
      $('.line4').css({
        transform: "rotate(45deg)",
        top: "7px",
        opacity: '0'
      });
    } else {
      $('.line').css({
        top: "0px"
      });
      $('.line1').css({
        transform: "rotate(0deg)",
        top: "0px",
        opacity: '1'
      });
      $('.line2').css({
        transform: "rotate(0deg)",
        top: "7px"
      });
      $('.line3').css({
        transform: "rotate(0deg)",
        top: "14px"
      });
      $('.line4').css({
        transform: "rotate(0deg)",
        top: "21px",
        opacity: '0'
      });
    };
  });
});

body {
  /*body reset*/
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

header {
  position: absolute;
  top: 0px;
  height: 500px;
  width: 100%;
  background-image: url(img/bg.jpg);
  background-size: cover;
}

.toggle-nav {
  width: 93px;
  height: 68px;
  background: #990e35;
  margin: 0px;
  z-index: 1;
  position: absolute;
}

.icon-container {
  display: block;
  height: 20px;
  position: absolute;
  top: 10px;
  backface-visibility: hidden;
}

.line {
  position: absolute;
  background-color: white;
  width: 37px;
  height: 3px;
  left: 28px;
  transition: all 250ms ease-in-out;
}

.nav-menu {
  background: #990e35;
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 20%;
  opacity: 0;
}

.nav-menu ul {
  width: 300px;
  display: inline-block;
  list-style: none;
  position: relative;
  top: calc(50% - 100px)
}

.nav-menu ul li {
  padding: 5px 0px;
  margin: 5px 0px;
}


/**** line base ****/

.line1 {
  top: 0px;
}

.line2 {
  top: 7px;
}

.line3 {
  top: 14px;
}

.line4 {
  top: 21px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header>

  <div class="toggle-nav">
    <div class="icon-container">
      <p class="line line1"></p>
      <p class="line line2"></p>
      <p class="line line3"></p>
      <p class="line line4"></p>
    </div>
  </div>
</header>


<nav class="nav-menu">
  <ul>
    <li>
      <a href="#"></a>Home</li>
    <li>
      <a href="#"></a>Artwork Gallery</li>
    <li>
      <a href="#"></a>Clients</li>
    <li>
      <a href="#"></a>About Me</li>
    <li>
      <a href="#"></a>Contact</li>
  </ul>
</nav>

Answer 1

您要点击这一行删除mouseenter-leave行为：

$('.toggle-nav').off('mouseenter');
$('.toggle-nav').off('mouseleave');

所以如果你在开始时从绑定中定义外部函数会更好，那么以后你可以再次绑定那些函数进入/离开：

$(document).ready(function() {
  function moveUp() {
    $('.line1').css({
      top: '-7px',
      opacity: '0'
    });
    setTimeout(function() {
      $('.line2').css({
        top: '0px'
      });
    }, 70);
    setTimeout(function() {
      $('.line3').css({
        top: '7px'
      });
    }, 140);
    setTimeout(function() {
      $('.line4').css({
        top: '14px',
        opacity: '1'
      });
    }, 210);
  }
  function moveDown() {
    $('.line4').css({
      top: '21px',
      opacity: '0'
    });
    setTimeout(function() {
      $('.line3').css({
        top: '14px'
      });
    }, 70);
    setTimeout(function() {
      $('.line2').css({
        top: '7px'
      });
    }, 140);
    setTimeout(function() {
      $('.line1').css({
        top: '0px',
        opacity: '1'
      });
    }, 210);
  }
  $('.toggle-nav').on("mouseenter", moveUp)
  $('.toggle-nav').on("mouseleave", moveDown);

  /* Make it X */
  $('.toggle-nav').on('click', function() {
    $('.toggle-nav').toggleClass('test');
    if ($('.toggle-nav').hasClass('test')) {
      $('.toggle-nav').off('mouseenter');
      $('.toggle-nav').off('mouseleave');
      $('.line').css({
        top: "+7px"
      });
      $('.line2').css({
        transform: "rotate(-45deg)"
      });
      $('.line1').css({
        transform: "rotate(-45deg)",
        top: "7px",
        opacity: '0'
      });
      $('.line3').css({
        transform: "rotate(45deg)"
      });
      $('.line4').css({
        transform: "rotate(45deg)",
        top: "7px",
        opacity: '0'
      });
    } else {
      $('.toggle-nav').on("mouseenter", moveUp)
      $('.toggle-nav').on("mouseleave", moveDown);
      $('.line').css({
        top: "0px"
      });
      $('.line1').css({
        transform: "rotate(0deg)",
        top: "0px",
        opacity: '1'
      });
      $('.line2').css({
        transform: "rotate(0deg)",
        top: "7px"
      });
      $('.line3').css({
        transform: "rotate(0deg)",
        top: "14px"
      });
      $('.line4').css({
        transform: "rotate(0deg)",
        top: "21px",
        opacity: '0'
      });
    };
  });
});

.toggle-nav {
  width: 93px;
  height: 68px;
  background: #990e35;
  margin: 0px;
  z-index: 1;
  position: absolute;
}
.icon-container {
  display: block;
  height: 20px;
  position: absolute;
  top: 10px;
  backface-visibility: hidden;
}
.line {
  position: absolute;
  background-color: white;
  width: 37px;
  height: 3px;
  left: 28px;
  transition: all 250ms ease-in-out;
}
.line2 {
  top: 7px;
}
.line3 {
  top: 14px;
}
.line4 {
  top: 21px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header>
  <div class="toggle-nav">
    <div class="icon-container">
      <p class="line line1"></p>
      <p class="line line2"></p>
      <p class="line line3"></p>
      <p class="line line4"></p>
    </div>
  </div>
</header>

Jquery初学者 - 菜单'动画'我遇到了一些麻烦

1 个答案: