javascript - jQuery animate() step: cross browser now argument -

disclaimer: i'm new in jquery animations , problem sounds stupid has have easy solution can't find reference of existing when searching online.

disclaimer 2: code you'll see not optimised, need work.

so have svg , have animate of components, , that's no problem.

i wrote piece of code should work cross browser, doesn't , know why have no idea how fix it.

$('#button_next').bind('click', function(){     if(!(parsefloat($('#last_rectangle').attr('x')) <= 308.1)){         $('.activescroll').each(function(){             var xvalue = parsefloat($(this).attr('x'));             // $(this).attr('x', (xvalue - 45 - 85.5));             $(this).animate(             {                 x: "-=130.5"             }, {                 duration: 1000, step: function(now) { $(this).attr('x', now); }             });         });     } }); 

what (and works in chrome) changes x value smoothly giving me eased scrolling. doesn't work in ff though. works if substitute

$(this).attr('x', xvalue-now); 

with

$(this).attr('x', now); 

and why when logging now value. in ff goes 0 -130.5 not want in first case, in chrome same exact code outputs relative numbers need works charm.

for completeness html elements like:

<rect x="177.6" y="12.9" class="activescroll" width="85.5" height="2"/> 

and have multiple <rect> elements.

it seems ff can't work relative values, although xvalue gets detected correctly can read (and write, can see commented line, works cross-browser it's not animated) attribute x.

the documentation doesn't mention such difference in now i'm stuck problem.

i'm using jquery 2.1.4, if think issue version, updating 3.2.1 gives me error i'm setting property has getter, sets anyways in jquery 2.1.4 don't understand problem lies there.

anyone has clue?

wiki