動畫到另一種背景顏色，然后再回來

Question

我正試圖讓我的白色背景閃爍綠光。 目前我有這個代碼，它變成綠色：

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

但是，我無法想象如何讓它在同一個動畫中再次變白。 我該怎么做呢？

Answer 1

您可以鏈接另一個.animate()調用，因為動畫將在fx隊列中排隊。

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

請記住，大多數jQuery函數都是可鏈接的，無需兩次調用$("#modal_newmessage") 。

在這里看到它。

Answer 2

這應該工作：

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

Answer 3

試試這個：

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