为什么这个 jQuery animation 只能工作一次？

Question

我在 web 中寻找解决方案，但没有成功。 我不明白为什么这段代码只触发一次：

 $("#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');
  }

});

第一次单击后，您永远不会删除类，因此它们仍然有效