循环遍历元素并添加/删除类

Question

我想遍历每个h1 > a元素，在一定延迟后添加然后删除一个类，但它不起作用。

我做错了什么？

＆＃13;

＆＃13;

$("h1 a").each(function() {
  $(this).addClass('glow').delay(2000).removeClass('glow');
});

＆＃13;

a {
  color: #000;
  text-decoration: none;
  text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);
}

h1 {
  text-align: center;
}

.glow {
  animation: glow .8s infinite alternate;
}

@keyframes glow {
  to {
    text-shadow: 0 0 6px #aaa;
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  <a href="#">wellcome</a>,&nbsp;
  <a href="#">bonjoure</a>,&nbsp;
  <a href="#">bienvenido</a>,&nbsp;
  <a href="#">benvenuto</a>,<br/>
  <a href="#">добро пожаловать</a>,<br/>
  <a href="#">willkommen</a>
</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 1

好的，忘了我说的话。这可以 - 但不是你自己的css动画。

＆＃13;

＆＃13;

var a = [];
$("h1 a").each(function(index) {
  a[index] = $(this);
  setTimeout(function() {
    a[index].addClass('glow').delay(500).queue(function(next) {
      a[index].removeClass('glow');
      next();
    });
  }, index * 500);
});

＆＃13;

a {
  color: #000;
  text-decoration: none;
  text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);
}

h1 {
  text-align: center;
}

.glow {
  background-color: yellow;
}

@keyframes glow {
  to {
    text-shadow: 0 0 6px #aaa;
  }
}

＆＃13;

<h1>
  <a href="#">wellcome</a>,&nbsp;
  <a href="#">bonjoure</a>,&nbsp;
  <a href="#">bienvenido</a>,&nbsp;
  <a href="#">benvenuto</a>,<br/>
  <a href="#">добро пожаловать</a>,<br/>
  <a href="#">willkommen</a>
</h1>

＆＃13;

＆＃13;

＆＃13;

将它们用作参考：

How to make delay between each loops of jQuery.each function? Callback to .delay()

Answer 2

如果你想提供发光效果，并且应该在一段时间后添加和删除课程才能生效，你可以像这样使用setInterval()：

＆＃13;

＆＃13;

$("h1").each(function(i, item) {
  setInterval(function() {
    $(item).addClass('glow');

  }, 2000 + i)
  setInterval(function() {
    $(item).removeClass('glow');

  }, 2000 + i)

});

＆＃13;

a {
  color: #000;
  text-decoration: none;
  text-shadow: -1px 0px 1px rgba(150, 150, 150, 1);
}

h1 {
  text-align: center;
}

.glow {
  animation: glow .8s infinite alternate;
}

@keyframes glow {
  to {
    text-shadow: 0 0 6px #aaa;
  }
}

＆＃13;

<h1>
  <a href="#">wellcome</a>,&nbsp;
  <a href="#">bonjoure</a>,&nbsp;
  <a href="#">bienvenido</a>,&nbsp;
  <a href="#">benvenuto</a>,<br/>
  <a href="#">добро пожаловать</a>,<br/>
  <a href="#">willkommen</a>
</h1>

＆＃13;

＆＃13;

＆＃13;