javascript - raphaeljs 歌剧中的鼠标事件错误？

Question

我有非常简单的 svg：只有一个需要在悬停时进行动画处理的矩形。

这是我现在拥有的：

var paper = Raphael('paper', 50, 50);

var rect = paper.rect(0, 0, 20, 20).attr({
    'width': 20,
    'height': 20,
    'fill': "red",
    'stroke-width': 0,
}).data('x', 'y');


rect.mouseover(function() {
    this.toFront();
    this.animate({
        'transform': 's2'
    }, 70);
}).mouseout(function() {
   this.animate({
      'transform': 's1'
   }, 50);
});​

看看实际操作http://jsfiddle.net/HPmqN/

这是问题所在：该代码在 Opera（我相信 IE）中无法正常工作，似乎 mouseout 事件只是没有触发。这是 Raphael、Opera 或我的代码中的某种错误吗？

Answer 1

您需要在 mouseover() 和 mouseout() 函数中的每个 .animate() 调用中添加一个 .stop() ，因为它们在动画期间会互相干扰

rect.mouseover(function() {
    this.toFront();
    this.stop().animate({
        'transform': 's2'
    }, 70);
}).mouseout(function() {
   this.stop().animate({
      'transform': 's1'
   }, 50);
});​

同样为了它，我会尝试同时制作出动画和过度动画。只为观赏乐趣。但这只是我。

编辑： 显然this.toFront()是导致 Opera 失去对 DOM 元素的跟踪。正如您所说，您需要 toFront() 您可以通过使用 $.css() 来交换它以达到相同的效果（可能）

$(this).css('zIndex', 9999);