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(){   
 
\t 
 
});

.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

只保留width在lightactive類和其他menu類本身。所以它會很好地顯示寬度過渡。另一件事是使用mousemove

注mouseover事件就地： -

在鼠標移動它仍然是打開和關閉。這不是因爲鼠標移動。但因爲你的掩膜層的是事件的目標（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>