jos3m jos3m - 6 months ago 11
jQuery Question

Endless animation function that receives a parameter on 'hover' event

The idea is to execute an animation while the cursor is over a div. I've done this other times but now the function with the animation receives a parameter and if I add the parameter the page blows up. Without that last call to the function the code doesn't crash the page.
Please check my code:

function OnHover() {
function Animation(obj) {
obj.stop().animate({ top: '20px' }, 600).animate({ top: '0px' }, 600, Animation(obj));
}

$('#infobox').hover(
function(event) {
$circle = $(event.target).children().first();
Animation($circle);
},
function(event) {
$circle = $(event.target).children();
$circle.stop();
}
);
}

Answer

I have used this workaround:

$target = undefined;
$("#wrapper .infobox").mouseenter(event, function animate() {
                if (typeof $target == 'undefined')
                    $target = $(event.target).children();

                $target.animate({ marginTop: "+=40px" }, 600);
                $target.animate({ marginTop: "-=40px" }, 600, animate);
            }
        );
        $("#wrapper .infobox").mouseleave(function() {
                $target.stop(true, false).animate({ marginTop: '20px'}, 300);
                $target = undefined;
            }
        );