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事件只是没有启动。这是拉斐尔，歌剧或我的代码中的某种错误吗？

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

同样为了它，我会尝试同时制作out and over动画。只是为了观赏乐趣。但那就是我。

修改显然this.toFront()导致Opera失去对DOM元素的跟踪。如你所说，你需要toFront（）你可以通过使用$ .css（）来实现相同的效果（可能）

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

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

1 个答案: