这个想法是在光标位于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();
}
);
}
我使用了以下解决方法:
$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;
}
);