间隔后颜色变化

Question

.logo {
  color: #f305eb;
  text-shadow: 0 0 10px #f757f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  function blinker() {
    $('.logo').fadeOut(200);
    $('.logo').fadeIn(200);
  }
  setInterval(blinker, 5000);
</script>
<h1 class="logo">LOGO!</h1>

所以我正在寻求一些帮助。上面的函数每 5 秒淡出/在我的文本中淡出 0.2+0.2 秒。这样它会使我的文本消失，但我真正想要的是在同一时间范围内将颜色从 #f305eb 更改为 #000。所以颜色将是#f305eb 5s 0.2s+0.2s 颜色变为黑色然后变回#f305eb

Answer 1

也许这样的事情会帮助你学习。但通常这种fadeOut(200); 编码风格并不友好。相反，您应该体验CSS transitions 和animations。

.logo {
  color: #f305eb;
  text-shadow: 0 0 10px #f757f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  function blinker() {
    $('.logo').css('color', '#000');
    setTimeout(function(){
      $('.logo').css('color', '#f305eb');
    }, 400);
    $('.logo').fadeOut(200);
    $('.logo').fadeIn(200);
  }
  setInterval(blinker, 5000);
</script>
<h1 class="logo">LOGO!</h1>

CSS 动画的替代方案

由于我们仅每 5 秒更改一次类，因此将动画留给浏览器和 CSS 会更加友好。

.logo {
  color: #f305eb;
  text-shadow: 0 0 10px #f757f1;
}

.logo.run
{
  animation: active 400ms ease-in-out;
}

@keyframes active {
  50% {
    opacity: 0;
    color: #000;
  }
  100% {
    opacity: 1;
    color: #f305eb;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  function blinker() {
    $('.logo').toggleClass('run');
  }
  setInterval(blinker, 5000);
</script>
<h1 class="logo">LOGO!</h1>