在Velocity.js中動畫改變顏色

我剛開始使用Velocity.js，並試圖製作一個簡單的動畫，其中我將圓圈的顏色從紅色更改爲黃色。在HTML我只是...在Velocity.js中動畫改變顏色

<!DOCTYPE html> 
<html> 
<head> 
    <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script> 
    <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <svg height=300 width=300> 
    <circle id="example" cx=50 cy=50 r=20 fill="red"></circle> 
    </svg> 
</body> 
</html>

...，我試圖改變一圈黃色的顏色在我的JavaScript是這樣的：

$('#example') 
    .delay(1000) 
    .velocity({fill: "yellow"});

我在做什麼錯？

來源

2015-07-12 sleepycow

由於每velocity.js docs，你需要通過填充顏色值作爲十六進制字符串：

段：

$('#example').delay(1000).velocity({ fill: '#ffff00' }, { duration: 2000 });

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js"></script> 
 
<svg height=300 width=300> 
 
    <circle id="example" cx=50 cy=50 r=20 fill="red"></circle> 
 
</svg>

希望這有助於。

P.S.您正試圖加載多個jQuery版本，即1.8.3和1.9.1。刪除不必要的。

來源

2015-07-13 03:19:26

它的工作原理！非常感謝！ :) – sleepycow

您可以使用backgroundColor與Fill完成。

var colorCode = "#D32D27" 
    $("#ColorDIV").velocity({ 
      backgroundColor: colorCode, 
      opacity: 1 
    }, 1000);   

    colorCode = "#FFDD00" 
    $("#ColorDIV").velocity({ 
      backgroundColor: colorCode, 
      opacity: 1 
    }, 1000);

來源

2016-07-21 12:12:19

請給出一些解釋，因爲僅有代碼的答案對其他用戶來說沒有多大價值。 – RHA

好點，更新... –

在Velocity.js中動畫改變顏色

回答

相關問題