Search code examples
svgjquery-animatecycle

SVG fill animation cycle broken

i am looking to simply animate two fill colors of an SVG. ping pong, loop, however you want to call it. the pieces work on their own, but put together into a recursive function to form the loop breaks it.

here's what i have (using jQuery):

$(document).ready( function() {
    var items = $('.st1');
    items.css('fill', '#ff3600');
    bl-colorCycle();
    function bl-colorCycle() {
      console.log('color cycle called');
      items.animate({fill: '#00ffcc'}, 5000, 'linear', bl-colorCycle);
    }
  });

for some reason, this throws this error:

SyntaxError: missing ( before formal parameters

what the heck am i missing? i've torn this apart several times and for the life of me, i cannot spot where the hell the missing '(' is! i've read all that i can find here, and found nothing that helps in this scenario. i've even tried putting the function call at the very end, just to see if some weird web-voodoo was at play...bupkiss. :(

i'm hoping someone out there has sharper eyes... :P

TIA.

WR!

Solution

  • Hyphen ("-") is not a legal identifier character. Try underscore ("_") instead. Ie. bl_colorCycle().