jquery scale effect is slow?

Question

I've got the following jquery code:

$(document).ready(function () {


     $('.box').click(function (){

         var selectedBox = $(this),
             selectedBoxLocationX = selectedBox.offset().left,
             selectedBoxLocationY = selectedBox.offset().top;

        selectedBox.animate({left:-selectedBoxLocationX, top:-selectedBoxLocationY},600).addClass('current');


        otherBoxes = $('.box:not(.current)');

        otherBoxes.animate({left:2000},600);
        selectedBox.effect('scale', {percent:500, direction: 'vertical'}, 1000);


        selectedBox.click(function(){
            selectedBox.effect('scale', {percent:20, direction: 'vertical'},200);
            otherBoxes.animate({left:0},600);
            selectedBox.animate({top: 0, left: 0},700).removeClass('current');

        });

    });

});

I'm finding that the selectedBox scale to 20% is very slow to kick in. It actually scales after the selectedBox animation.

Can anyone tell me why this is happenening?

MTIA!

Answer 1

I updated your fiddle with a (hopefully) working example:

http://jsfiddle.net/sk62Y/4/

Your problem was that, once you selectedBox.click handler, you had 2 click events on the box. Somehow this completely confused the animation.

I now just remove the original click handler ond the selectedBox Element when you click on it and reattach it on the second click.