jQuery animate step function for-loop

jQuery animate step function for-loop

Hey guys,

I'm creating a bar that fills up if you click on different points on it. The bar fills up with a different animation as the points. To fill up the points I decide to check his current position inside the step function of animate. After it i try to get the dot positions and compare it to the current pointer position. The problem is that the for-loop seems to repeat for every pixel that the pointer moves, so the dots are flickering.

  1.     progressBar : function()
        {
           
            var _currentPinpos = 0;
           
            $(".progressbar .circle").click(function(){
           
                var _gettop = $(this).css('top');
               
                var _circles = new Array();
                _circles = $('.progressbar .circle');   

                $(".progressbar .pin").animate({
                    "top": _gettop
                    },
                    {
                       
                        duration: 400,
                       
                        step: function(now, fx){
                           
                        var _currentPinpos = $('.progressbar .pin').css('top').split('.')[0].replace('px','');
                        console.log('Pin position:' + _currentPinpos);
                       
                        for(var i = 1; i < 9; i++){
                           
                            var _circlePos = $(_circles[i]).css('top').split('.')[0].replace('px','');
                            console.log('Circle position:' + _circlePos[i]);
                           
                            if (_circlePos <= _currentPinpos){
                       
                                $(_circles[i]).removeClass('grey');
                                $(_circles[i]).addClass('blue');
                   
                            } else {
                               
                                $(_circles[i]).removeClass('blue');
                                $(_circles[i]).addClass('grey');

                            }
                       
           
                        }
                                               
                       
                    }
                   
                });
       
                $(".progressbar .bar.blue").animate({"height": _gettop}, 400);
               
                $(".progressbar .circle.active").removeClass('active');
                $(this).addClass('active');
       
            });























































Some good ideas to fix this up?