Вложение функций jQuery в функции - PullRequest
Новая
       7

Вложение функций jQuery в функции

0 голосов
/ 03 декабря 2018

Ниже приведен код, над которым я работаю 

$("#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, а остальные команды не будут выполнены.Может ли кто-нибудь помочь мне понять правильный синтаксис для решения моей проблемы?

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Как я уже говорил выше, .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>
0 голосов
/ 03 декабря 2018

Отредактировано 

$("#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>
...