Добавление класса в класс изображения

У меня возникли проблемы с добавлением класса в класс изображения. Класс, который я хочу добавить, заставит изображение непрерывно вращаться при наведении курсора. Не знаете, что я делаю неправильно?

Мой код выглядит следующим образом

HTML

<header>
   <nav>
     <img class = "logo" src = "images/circularLogo.png" alt = "logo">
     <!--there are other images here also that is why I need the class-->
   </nav>
</header>

JQuery

$('logo').hover(
       function(){ $(this).addClass('animate') },
       function(){ $(this).removeClass('animate') }
);

CSS

header {
  background: none;
  height: 4em;
}

nav{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 4em;
  font-size: 1em;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(192,192,192,0.3);
}

.logo {
  height: 3.5em;
  width: 3.5em;
  position: absolute;
  left: 50%;
  margin-left: -50px !important;
  display: block;
  margin-top: 4.5;
}

.animate {
  -webkit-animation: infinite-spinning 1s infinite linear;
}

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

https://jsfiddle.net/o2gxgz9r/42589/