Je viens de commencer à utiliser Velocity.js et j'essaie de créer une animation simple où je change la couleur d'un cercle du rouge au jaune. Le HTML que j'ai est juste ...

<!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>

... et j'essaye de changer la couleur du cercle en jaune dans mon JavaScript comme ceci:

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

Qu'est-ce que je fais mal?

1
sleepycow 12 juil. 2015 à 23:07

2 réponses

Meilleure réponse

Conformément à la documentation velocity.js , vous devez transmettre le remplissage valeur de couleur sous forme de chaîne hexadécimale:

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>

J'espère que cela t'aides.

P.S. Vous essayez de charger plusieurs versions de jQuery, c'est-à-dire 1.8.3 et 1.9.1. Supprimez celui qui n'est pas nécessaire.

5
Tahir Ahmed 13 juil. 2015 à 03:19

Vous pouvez accomplir avec backgroundColor vs Fill.

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

    colorCode = "#FFDD00"
    $("#ColorDIV").velocity({ 
          backgroundColor: colorCode,
          opacity: 1
    }, 1000);           
0
Patrick 22 juil. 2016 à 00:30