如何使用JQuery重复更改颜色？

Question

我认为这应该有效:

$("#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>

我希望它是红色然后是黑色,但它没有这样做,为什么？

Answer 1

如果"不起作用",则表示文本立即变为黑色,这是因为css()不像函数那样在fx队列上fadeX()运行.要解决此问题,请更改上次fade调用的回调中的文本颜色:

$("#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>