Question

下面是我正在处理的代码

$("#firstnamesubmitbutton").click(function(){
  $(".hrmed").addClass("lineanimation", function(){

  $(".firstnamesection").addClass("animate fadeOut");
  $(".firstnamesection").addClass("hidden");
  $(".hrmed").removeClass("lineanimation");
  $(".lastnamesection").removeClass("hidden");
  alert("Code was executed");
  });  

});

我正在尝试创建一个嵌套的jQuery函数，以便在添加“ lineanimation”类之后调用其余代码，但是当我运行此代码时，将添加“ lineanimation”类并且其余命令是未执行。谁能帮助我了解解决问题的正确语法？

预先感谢

Answer 1

如上所述，.addClass()是即时的。因此，它不采用回调方法。此外，它无法固有地了解CSS转换的持续时间。

您可以使用setTimeout()。等待 X 毫秒后，它将执行给定的功能。

第一个参数是您在问题中编写的函数。第二个参数对应于CSS动画的长度。

（例如，一个3s动画为3000。）

$("#firstnamesubmitbutton").click(function() {
  var $hrmed = $(".hrmed");
  $hrmed.addClass("lineanimation");

  setTimeout(function() {
    $(".firstnamesection").addClass("animate fadeOut hidden");
    $hrmed.removeClass("lineanimation");
    $(".lastnamesection").removeClass("hidden");
    console.log("Code was executed");
  }, 3000);

});

.hrmed {
  padding: 50px;
  border: 1px solid black;
}

.hrmed.lineanimation {
  background: blue;
  transition: background 3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="firstnamesubmitbutton">Click me</button>
<div class="hrmed"></div>

Answer 2

已编辑

$("#firstnamesubmitbutton").click(function(){
  $('.hrmed').delay(1000).queue(function () {
    $(this).addClass('lineanimation').dequeue();
  }).delay(2000).queue(function () {
    $(".firstnamesection").addClass("animate fadeOut");
    $(".firstnamesection").addClass("hidden");
    $(".lastnamesection").removeClass("hidden");
    $(this).removeClass('lineanimation');
    alert("Code was executed");
  });
});

.hidden {
  display: none;
}

.lineanimation {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="firstnamesubmitbutton">Click</button>
<div class="hrmed">
  <div class="firstnamesection">firstname</div>
  <div class="lastnamesection">lastname</div>
</div>

在函数中嵌套jQuery函数

2 个答案: