Jquery hover animation only once

Question

The hamburger should bounce every time the user hovers the text. The problem I'm having is that only bounces once on hover. I want it to bounce every time I hover.

https://codepen.io/drunktuts/pen/gxzYJy

$(document).ready(function(){
  $("span").hover(function(){
  $('img').addClass("bounce");
  });
});

.bounce{
animation: bounceOut 0.4s linear;
}
@keyframes bounceOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
        transform: scale(1);
}
25% {
opacity: 1;
-webkit-transform: scale(0.97);
        transform: scale(0.97);
}
50% {
opacity: 1;
-webkit-transform: scale(1.19);
        transform: scale(1.19);
}
75% {
opacity: 1;
-webkit-transform: scale(1);
        transform: scale(1);
}
 100% {
 opacity: 1;
 }
}

Answer 1

• Use .toggleClass()
• Close your </span>

Your jQuery should look like:

$("span").hover(function() {
  $('img').toggleClass("bounce");
});

which is actually a shorthand for:

$("span").on({
   mouseenter: function() {
     $('img').addClass("bounce");
   },
   mouseleave: function() {
     $('img').removeClass("bounce");
   }
});

Here's a demo:

$(document).ready(function() {

  $("span").hover(function() {
    $('img').toggleClass("bounce");
  });

});

.bounce {
  animation: bounceOut 0.4s linear;
}

@keyframes bounceOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.19);
    transform: scale(1.19);
  }
  75% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}

<img src="https://pizzapgh.github.io/test_bsb/assets/burger-icon.png">
<span>hover</span>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

CSS-only way

You could also invert the order of your HTML elements and not use jQuery at all, but rather the + next sibling selector:

span:hover + img {
  animation: bounceOut 0.4s linear;
}

@keyframes bounceOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    opacity: 1;
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.19);
    transform: scale(1.19);
  }
  75% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}

<span>hover</span>
<img src="https://pizzapgh.github.io/test_bsb/assets/burger-icon.png">

Answer 2

Just add a remove class on mouseleave

$(document).ready(function(){
 $("span").hover(function(){
    $('img').addClass("bounce");
});

 $("span").mouseleave(function(){
  $("img").removeClass("bounce");
 });

});

Answer 3

Use .toggleClass():

$(document).ready(function(){
  $("span").hover(function(){
    $('img').toggleClass("bounce");
  });
});