动画到另一个背景色，然后再返回

Animating to another background-color, then back again

本文关键字：然后 返回 背景色 另一个 动画      更新时间：2023-09-26

我想让我的白色背景闪绿。现在我用下面的代码把它变成绿色:

$( "#modal_newmessage" ).animate({
    backgroundColor: "#8bed7e"
}, 500 );

然而，我不知道如何使它在同一动画中再次变成白色。我该怎么做呢?

您可以链接另一个.animate()调用，因为动画将在fx队列中排队。

$("#modal_newmessage").animate({
  backgroundColor: "#8bed7e"
}, 500).animate({
  backgroundColor: "#fff"
}, 500);

记住大多数jQuery函数都是可链接的，不需要调用$("#modal_newmessage")两次。

应该可以:

$( "#modal_newmessage" ).animate({
    backgroundColor: "#8bed7e"
}, 500, function() {
    $( "#modal_newmessage" ).animate({ backgroundColor: "#fff" });
} );

试试这个:

$(function() {
    $( "#modal_newmessage" ).animate({
      backgroundColor: "#aa0000",
      color: "#fff",
      width: 500
    }, 1000 ).animate({
      backgroundColor: "#fff",
      color: "#000",
      width: 240
    }, 1000 );
});
<标题>注意:

对于动画背景颜色，您需要jQuery ui进行颜色动画。

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
相关文章：