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

Answer 1

你需要的是这个&nbsp; $("#d").click( function() {&nbsp;&nbsp; var h = $(".cont");&nbsp; var f = h.offset();&nbsp; if (f.left < 1) {&nbsp; &nbsp; h.addClass('anim');&nbsp; &nbsp; h.removeClass('anim2');&nbsp; &nbsp; } else {&nbsp; &nbsp; h.addClass('anim2');&nbsp; &nbsp; h.removeClass('anim');&nbsp; }});第一次点击后，您永远不会删除这些类，因此它们仍然有效