CODEWITHSUNDEEP
jqueryhtmlcss
Hai Tien
Hai Tien

Reputation: 3117

removeClass and keep effect transition jQuery

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

Answers (1)

jafarbtech
jafarbtech

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

Related Questions