Reputation: 3117
I got a trouble about transition: all 1s;
It appears only when I mouseover
but for mouseout
, no effect appear.
I use jQuery
like this
$(".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
is parent box. thank you so much for any helps.
Upvotes: 1
Views: 46
Reputation: 7025
Keep only width
in lightactive
class and others inside menu
class itself. So it would show the width transition well. another thing is use mouseover
event inplace of mousemove
Note:-
On mouse move it is still open and close. It is not because of mousemove. but because of your mask layer is outside of the event target (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>
Upvotes: 1