Question

I am a JS novice. Using some code I found here to help me with mouseover scale/rotate images but now when I try to apply it to more than one object I’m getting errors saying “too much recursion”. Before the function didn’t take any arguments, it just was on s_1 and it worked fine. I am tempted to just write different code for each object but that isn’t very good programming practice.

            var over = false;
            $(function(){
                $("#s_1").hover(function(){
                    over = true;
                    swing_left_anim("#s_1");
                }, function(){
                    over = false;
                });
   $("#np_1").hover(function(){
                    over = true;
                    swing_left_anim("np_1");
                }, function(){
                    over = false;
                });
            });

            function swing_left_anim(obj){
                $(obj).animate({
                    rotate: '0deg'
                }, {
                    duration: 500
                });
                if (over) {
                    $(obj).animate({
                        rotate: '25deg'
                    }, 500, swing_right_anim(obj));

                }
            }

            function swing_right_anim(obj){
                $(obj).animate({
                    rotate: '-25deg'
                }, 500, swing_left_anim(obj));
            }

Answer 1

It is jQuery bug. A callback must be a separate object every time you call animate(), beacause jQuery is copying reference of function (or object, it depends on chosen variant of animate()). More details here: http://blog.stephenrushing.com/index.php/jquery/jqueryanimate-too-much-recursion-from-complete-callback/