Почему эта анимация jQuery работает только один раз?

Question

Я искал решение в сети, но безуспешно. Я не понимаю, почему этот код срабатывает только один раз:

$("#d").click(function() {
  var h = $(".cont");
  var f = h.offset();

  if (f.left < 1) {
    h.addClass('anim');
  } else {
    h.addClass('anim2');
  }
});

body{
  margin: 0;
}

#d {
  width: 50px;
  height: 50px;
  background: #999;
}

.cont {
  width: 200px;
  height: 200px;
  opacity: 1;
  background: #333;
  position: absolute;
  -webkit-transition: all 1s ease-in-out;
}

.anim {
  -webkit-transform: translate(50px, 0px);
}

.anim2 {
  -webkit-transform: translate(0px, 0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d"></div>
<div class="cont"></div>

Вот демо JSFiddle .

Answer 1

Что вам нужно, это

  $("#d").click( function() { 
  var h = $(".cont");
  var f = h.offset();

  if (f.left < 1) {

    h.addClass('anim');
    h.removeClass('anim2');

    } else {

    h.addClass('anim2');
    h.removeClass('anim');
  }

});

после первого щелчка вы никогда не удаляете классы, поэтому они по-прежнему действуют