0

私は非常に単純な svg を持っています。ホバー時にアニメーション化する必要がある 1 つの四角形だけです。

これが私が今持っているものです：

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、または私のコードのバグですか?

4

1 に答える 1

0

アニメーション中に相互にバグが発生しているため、 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);
于 2012-11-22T13:39:19.110 に答える