Q: How to change colors repeatedly with JQuery? I thought that this should work:


$("#manual").css("color","red").fadeIn(400).fadeOut(150).fadeIn(150).fadeOut(150).fadeIn(150).css("color","black");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="manual">
      some text here
    </div>


I'm expecting it to be red and then black but it isn't doing that, why?

A: If by 'doesn't work' you mean that the text turns black immediately, that's because css() doesn't operate on the fx queue as the fadeX() functions do. To fix this, change the text colour in the callback of the last fade call:


$("#manual").css("color", "red").fadeIn(400)
  .fadeOut(150).fadeIn(150)
  .fadeOut(150).fadeIn(150, function() {
    $(this).css("color", "black");
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="manual">
  some text here
</div>



A: Use SetInterval function for it:
  var v=['red','green','yellow','blue'];
  var x=0;
  setInterval(
    function(){
       $("#manual").css("color",v[x]); x++;
    }, 
    3000
    );

