Анимация изменения цвета в 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, вам нужно передать заполнить значение цвета в виде шестнадцатеричной строки:

Snippet:

$('#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 vs. 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

ответ

Смежные вопросы