javascript - 为什么这个 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 demo .

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');
  }

});

第一次点击后你永远不会删除类，所以它们仍然有效