scroll - Weird percentage computing with jQuery -

i have carousel on page acting little funny. though jsfiddle works without hitch, operates differently on site.

here's site that's working funky: http://drainteractive.com/conceptstudio/

here's working jsfiddle: http://jsfiddle.net/exrr7/13/

the code in functions.js file same in jsfiddle:

$('.move-left').click(function(){ $('.belt').animate({right: '-=50%'}, 0); });  $('.move-right').click(function(){ $('.belt').animate({right: '+=50%'}, 0); }); 

however, on site, second time click on 1 of arrows, things bizarre. after initial 50% jump, belt.div moves somewhere around 600% right. 3000%.

anyone know causing this?

edit: okay, jsfiddle has +/-=25% instead of 50%, that's not what's causing problem.

i can't test should work

   var count = 0;     $('.move-left').click(function(){       count -= 50;       $('.belt').animate({right: count + '%'}, 0);    });     $('.move-right').click(function(){       count += 50;       $('.belt').animate({right: count + '%'}, 0);    }); 

yes jason p said. when animate .belt first time value of right auto. jquery add's 50% jquery uses getcomputedstyle (if i'm right) value of right although style attribute 50% getcomputedstyle return value in px