我遇到了一个关于transition: all 1s;
的问题它只出现在我mouseover
但是mouseout
,没有效果出现。removeClass并保持效果转换jQuery
我用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
是父箱。非常感谢你的帮助。
啊外面。抱歉。请等我 –
在具有其他状态的班级上添加一个转换。 – zer00ne
你可以在下面添加你的答案吗? –