JQuery проблема (задержка и порядок)

Question

Я пытаюсь выучить jQuery. Я пытался сделать так, чтобы сначала вызывался «slideUp», а затем «removeClass» и так далее, но, похоже, он не работает.

Другая проблема заключается в том, что если я нажимаю на тот же значок, который уже выбран, задержка .delay работает, но не в других случаях.

Ссылка на jsFiddle

$(".icon ").click(function() {
  $(".text").slideUp(1000).delay(800);
  $(".icon").removeClass("selected");
  $(".icon").addClass("unselected")
  $(this).removeClass("unselected");
  $(this).addClass("selected");
  $(".text").eq($(this).index()).slideDown(1000);
});

Answer 1

Проверьте обновленный jsfiddle https://jsfiddle.net/2bv4seh1/113/

$(".icon").click(function() {
  $(".text").slideUp(500).delay(500);
  $(".icon").removeClass("selected");
  $(this).toggleClass("selected");
  $(".text").eq($(this).index()).delay(500).queue(function(nxt) {
      $(this).slideDown(300);
      nxt();
})

});

.delay () используется для элементов, которые являются частью очереди, например анимации. Простой addClass не ставится в очередь. : - j Задержка запроса не работает

Answer 2

Попробуйте написать код внутри функции обратного вызова slideUp, например:

$(".icon ").click(function() {
  var _this = $(this);
  $(".text").slideUp(1000, function(){
      $(".icon").removeClass("selected");
      $(".icon").addClass("unselected")
      _this.removeClass("unselected");
      _this.addClass("selected");
      $(".text").eq($(this).index()).slideDown(1000);
  }).delay(800);
});