鼠标移入移出游戏暂停Java_Raphael JS - 在鼠标悬停期间开始/继续制作动画 . 在mouseout上暂停动画...

我是一个更优雅的方式来做到这一点，但在我的头顶，你可以尝试这样的事情：http://jsfiddle.net/D6Ps4/2/

如果由于某种原因消失，我已经包含下面的代码 . 解决方案只是启动动画，然后检查鼠标光标(注意e.offsetX / e.offsetY)是否在某个设定的时间间隔内在Raphael对象(Element.getBBox())的边界框内 . 如果是，则不执行任何操作并使用setTimeout在某个时间再次检查，如果不是，则暂停动画 .

var paper = Raphael("holder");

var animObject = Raphael.animation({cx: 400}, 5000);

circle = paper.circle(90, 90, 45).attr({fill: "#0E4"});

var timer;

circle.mouseover(function(e) {

var anim = function(shouldAnim) {

if (shouldAnim) {

circle.animate(animObject);

}

if (!mouseInsideCircle(e, circle)) {

circle.pause();

return;

} else {

timer = setTimeout(function() {anim(false)}, 20);

}

}

anim(true);

});

circle.mouseout(function() {

this.pause();

clearTimeout(timer);

});

var mouseInsideCircle = function(e, c) {

var bb = c.getBBox();

if (e.offsetX > bb.x && e.offsetY > bb.y) {

return true;

}

return false;

}

我确定解决方案有缺陷(它检查boundBox，而不是圆圈本身;它也假设圆圈向右移动)并且可能不理想，但它似乎工作得相当顺利，希望能让你走上正确的道路 .