0

このフィドルを参照してください：

http://jsfiddle.net/UfP3C/3/

各リストアイテムにはSVG要素が含まれています。

私の目標は、ユーザーがリストアイテムにカーソルを合わせると、Raphaelアニメーションが発生することです（その子svg要素に対して）。

次の問題が発生しています。

  • マウスをゆっくり動かすと、JQuery.hoverは正常に機能します。ただし、両方のリストアイテムを（水平方向に）すばやくマウスで移動（およびオフ）すると、svg要素が「マウスエンター」のアニメーション位置で動かなくなることがよくあります。

アニメーションを期待どおりに機能させる方法を理解しようとしています。両方のリストアイテムをすばやくマウスで移動すると、最終的にsvg要素が「マウスリーブ」の位置になります。

上記のフィドルは、問題を示しています（FireFox5およびChrome13の場合）。

4

2 に答える 2

0

Raphael のネイティブな mouseover と mouseout を使用することをお勧めします これらはこれらのイベントに迅速に応答します 「this」というキーワードを使用してアニメーションをしっかりとバインドすることもできます

于 2011-08-18T21:58:38.687 に答える
0

解決策については、このフィドルを参照してください。

svg アニメーションが mouseenter animate 位置でフリーズしないようにするには、animate in と out の時間を同じ値に設定します。

 list_item.hover(function() {
    my_rectangle.animate({
        y: 0
    }, 400, 'bounce');

},function(){
    my_rectangle.animate({
        y: 200
    }, 400, 'bounce');
});

上記のコードでは、アニメーション時間は 400 です。両方のアニメーション時間を同じ値に設定すると、問題が解決します。

完全なコードについては、上記のフィドルを参照してください。

JQuery ホバー関数の代わりに Raphael ホバー関数を (異なるアニメーション時間で) 使用しても、同じ問題が表示され、同じ解決策があることに注意してください。

于 2011-08-20T04:45:53.177 に答える