jquery - removeClass 并保持效果转换 jQuery

Question

我遇到了关于 transition: all 1s; 的麻烦 它仅在我 mouseover 时出现，但对于 mouseout，没有效果出现。

我这样使用 jQuery

$(".menu-inside ul").on('mousemove', function(e) {
  if ((e.pageX - this.offsetLeft) < $(this).width() / 1) {
    $('.menu').addClass('lightactive');
  } else {
    $('.menu').removeClass('lightactive');
  }
}).on('mouseout', function(){           
	
});

.menu .level1 {
  left:0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  width:0;
}
.menu.lightactive .level1 {
  background:rgba(0,0,0,0.5);
  top:0;
  bottom:0;
  left:0;
  position:fixed;
  z-index:25;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m1 menu">
  <div class="gothic menu-center" id="menu-center">
    <div class="menu-inside">
      <div class="mn-btn">
        <div class="menubtn">
          <p class="btnmn">
            <span class="m1"></span>
            <span class="m2"></span>
            <span class="m3"></span>
          </p>
        </div>
      </div>
      <ul>
        <li><a class="" href="#header"><span>01</span><span>Menu1</span></a></li>
        <li><a href="#profile" class="active"><span>02</span><span>Menu2</span></a></li>
        <li><a href="#quote"><span>03</span><span>Menu3</span></a></li>
        <li><a href="#work"><span>04</span><span>Menu4</span></a></li>
      </ul>
    </div>
  </div>
  <div class="level1"></div>
  <div class="level2"></div>
</div>

.menu 是父框。非常感谢您的帮助。

Answer 1

只在 lightactive 类中保留 width，在 menu 类本身中保留其他内容。所以它会很好地显示宽度过渡。另一件事是使用 mouseover 事件代替 mousemove

注意:-

在鼠标移动时它仍然打开和关闭。这不是因为 mousemove。但是因为你的 mask 层在事件目标之外(level1)

$(".menu-inside ul").on('mouseover', function(e) {
  if ((e.pageX - this.offsetLeft) < $(this).width() / 1) {
    $('.menu').addClass('lightactive');
  } else {
    $('.menu').removeClass('lightactive');
  }
}).on('mouseleave', function(){
  if ($('.menu').hasClass('lightactive')) {
    $('.menu').removeClass('lightactive');
  }
});

.menu .level1 {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:0;
  background:rgba(0,0,0,0.5);
  z-index:25;
}
.menu.lightactive .level1 {
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m1 menu">
  <div class="gothic menu-center" id="menu-center">
    <div class="menu-inside">
      <div class="mn-btn">
        <div class="menubtn">
          <p class="btnmn">
            <span class="m1"></span>
            <span class="m2"></span>
            <span class="m3"></span>
          </p>
        </div>
      </div>
      <ul>
        <li><a class="" href="#header"><span>01</span><span>Menu1</span></a></li>
        <li><a href="#profile" class="active"><span>02</span><span>Menu2</span></a></li>
        <li><a href="#quote"><span>03</span><span>Menu3</span></a></li>
        <li><a href="#work"><span>04</span><span>Menu4</span></a></li>
      </ul>
    </div>
  </div>
  <div class="level1"></div>
  <div class="level2"></div>
</div>