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

你需要的是这个

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

  }

});

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