CODEWITHSUNDEEP
jquerycssmouseentermouseleave
Marco Calcinelli
Marco Calcinelli

Reputation: 1

Problem with JQuery mouseenter / mouseleave: it works once, once it doesn't, then once it does, and so on

I'm a jQuery newbie. I created a simple animation with JQuery and CSS for a button that I would like to use on my site. The mouseenter and mouseover animation work fine once, then not once, then work again, then not. Basically it's like skipping a step...

I tried reading different threads and different solutions, but I couldn't unblock the situation. Where am I wrong?

The HTML / JQUERY code:

  <script>
  $(document).ready(function(){

    $('.round-w').show();
    $('.round-w').on({
      mouseenter: function(){
        $(this).toggleClass('pulseAnim');
      },
      mouseleave: function(){
        $(this).toggleClass('pulse-offAnim');
      },
      click: function(){
        $('.round-w').fadeOut(200);
        $('.round-b').addClass('block').toggleClass('My-animIn');
      }
    });

    $('.round-b').click(function(){
      $('.round-b').removeClass('block').fadeOut(200);
      $('.round-w').fadeIn(200);
    });

  });
  </script>

The CSS:

/*  ON HOVER 
========================================== */

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1) rotate(180deg);}
}
.pulseAnim {
  animation: pulse 0.4s ease-in-out;
  -webkit-animation: pulse 0.4s ease-in-out;
}


/*  ON LEAVE 
========================================== */

@keyframes pulse-off {
  0% {transform: scale(1) rotate(180deg);}
  50% {transform: scale(1);}
  100% {transform: scale(1);}
}
.pulse-offAnim {
  animation: pulse-off 0.4s ease-in-out;
  -webkit-animation: pulse-off 0.4s ease-in-out;
}


/*   ON CLICK 
========================================== */

.round-w {
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #FFF;
    position:absolute;
    display: none;
}

.round-b {
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    background-color: #000;    
    position:absolute;
    display: none;
}

.round-b.block {
  display: block;
}
.round-w.block {
  display: block;
}


@keyframes animIn { 
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.My-animIn {
  animation: animIn 0.2s ease-in-out;
  -webkit-animation: animIn 0.2s ease-in-out;
}

Upvotes: 0

Views: 34

Answers (1)

epascarello
epascarello

Reputation: 207491

Because you leave the other class on the element. The second time you are removing the class with toggle....

$(document).ready(function(){

    $('.round-w').show();
    $('.round-w').on({
      mouseenter: function(){
        $(this).addClass('pulseAnim').removeClass('pulse-offAnim');
      },
      mouseleave: function(){
        $(this).addClass('pulse-offAnim').removeClass('pulseAnim');
      },
      click: function(){
        $('.round-w').fadeOut(200);
        $('.round-b').addClass('block').toggleClass('My-animIn');
      }
    });

    $('.round-b').click(function(){
      $('.round-b').removeClass('block').fadeOut(200);
      $('.round-w').fadeIn(200);
    });

  });
.round-w, .round-b {
  outline: 1px dashed #CCC;
}

.round-b { display:none;}




/*  ON HOVER 
========================================== */

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1) rotate(180deg);}
}
.pulseAnim {
  animation: pulse 0.4s ease-in-out;
  -webkit-animation: pulse 0.4s ease-in-out;
  animation-fill-mode: forwards;
}


/*  ON LEAVE 
========================================== */

@keyframes pulse-off {
  0% {transform: scale(1) rotate(180deg);}
  50% {transform: scale(1);}
  100% {transform: scale(1);}
}
.pulse-offAnim {
  animation: pulse-off 0.4s ease-in-out;
  -webkit-animation: pulse-off 0.4s ease-in-out;
  animation-fill-mode: forwards;
}


/*   ON CLICK 
========================================== */

.round-w {
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #FFF;
    position:absolute;
    display: none;
}

.round-b {
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    background-color: #000;    
    position:absolute;
    display: none;
}

.round-b.block {
  display: block;
}
.round-w.block {
  display: block;
}


@keyframes animIn { 
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.My-animIn {
  animation: animIn 0.2s ease-in-out;
  -webkit-animation: animIn 0.2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round-b"></div>
<div class="round-w">☺️</div>

Upvotes: 0

Related Questions