jQuery 问题（延迟和订单）

Question

我正在努力学习jQuery。我试图让 "slideUp" 先发生，然后 "removeClass" 等等，但是，它似乎不起作用。

另一个问题是，如果我单击已选中的同一个图标，.delay 有效，但在其他情况下无效。

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

尝试在 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);
});

Answer 2

检查更新的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 没有排队。 :- jQuery delay not working

jQuery 问题（延迟和订单）

jQuery issue (Delay and Order)

javascript

jquery

slide