-1

.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>

So I'm looking for a little help. The function above fades out/in my text for 0.2+0.2 seconds every 5 seconds. This way it makes my text disappear, but what I'm really looking for, is to change the color from #f305eb to #000 for the same timeframe. So the color will be #f305eb for 5s the for 0.2s+0.2s the color changes to black then back to #f305eb

VLAZ
  • 26,331
  • 9
  • 49
  • 67
David Cibin
  • 21
  • 8
  • https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery kindly refer to this question – Josh Mar 29 '21 at 07:44

1 Answers1

1

Maybe something like this will help you learn. But generally this style of fadeOut(200); codings are not friendly. Instead, you should experience CSS transitions and 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>

An alternative with CSS animations

Since we only change the class every 5 sec., it will be much more friendly as we leave the animation to the browser and 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>
BOZ
  • 2,731
  • 11
  • 28