我是一个更优雅的方式来做到这一点,但在我的头顶,你可以尝试这样的事情: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,而不是圆圈本身;它也假设圆圈向右移动)并且可能不理想,但它似乎工作得相当顺利,希望能让你走上正确的道路 .