在'hover'事件上接收参数的无限动画功能

时间:2016-05-31 13:34:32

标签: javascript jquery hover jquery-animate

想法是在光标位于div上时执行动画。我已经完成了其他这些,但现在动画的功能接收参数,如果我添加参数页面爆炸。如果没有最后一次调用该函数,代码不会使页面崩溃。 请检查我的代码:

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();
        }
    );
}

1 个答案:

答案 0 :(得分:0)

我使用过这种解决方法:

$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;
            }
        );