javascript - jquery .delay() 不做事

Question

您好，我已经制作了一个模态并为其添加了一个关闭按钮，因此当单击它时，它会向模态添加一个类，触发关闭模态动画，但后来我尝试再次删除该类，但它什么也没做

这是我的代码

$('.close').on('click', function(){
$(this)
  .parent().addClass("closing")
  .delay(3250)
  .queue(function() {
     $(this).parent().removeClass('closing');
     $(this).parent().removeClass('open');
     $(this).dequeue();
 });
});

我添加了一个控制台日志来查看 .delay 是否有效，但它似乎找不到正确的元素来从中删除类

Answer 1

由于链接，.queue() 内的此变量将引用 .close 元素的父元素。

$('.close').on('click', function () {
    $(this) // Initial element.
        .parent().addClass("closing") // this refers  to$(this).parent()
        .delay(3250)
        .queue(function () {
        $(this).parent().removeClass('closing'); // This refers to $(this).parent().parent()
        $(this).parent().removeClass('open');
        $(this).dequeue();
    });
});

解决方案

  $('.close').on('click', function() {

    $(this).parent().addClass("closing")
      .delay(3250)
      .queue(function() {
        $(this).removeClass('open closing').dequeue();
      });
  });

    .closing {
      background: red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <button class="close">Close</button>
</div>