（長いunhover用）Snap.svgホバー/ unhoverバグ

Question

私はサークルを作り、その後、このようにそれをアニメーション化した場合 - すべての作品：

var s = Snap(200,200); 
    var c = s.circle(100,100,100); 

    c.hover(function(){ 
    c.animate({fill:"red"}, 500, mina.easeinout); 
    }, function() { 
    c.animate({ fill:"black" }, 500, mina.easeinout); 
    }); 

それはホバーにし、「unhover」に赤に色が変化それは黒に戻ります。しかし、もし私が2回目の関数（ぶら下げ）を500の代わりに1500にすると、サークルの上にマウスカーソルを置くと、1.5秒以内に（再び円の黒の前に）AGAINを移動して移動することに気付くでしょう。完全な赤色にアニメーションし、アニメーションなしで急速に黒くなります。ここにデモがあります： https://jsfiddle.net/Drasik/5bcu4rc5/1/

どうして私はそれを修正できますか？ありがとう！

Answer 1

アニメーションはまだ実行されていますので、ホバリングしてから500ms後にもう一度ホバーすると、500msで赤に変わり、1000msでもう一度黒に変わるように伝えられます（そして、ブラウザは混乱してしまいます。 ）。

これを避けるために、あなたが後ろにホバリング時に、この（https://jsfiddle.net/5bcu4rc5/3/）のように、黒のアニメーションにフェードを停止しようとすることができます

c.hover(function(){ 
    c.stop(); // stops the black fill from continuing 
    c.animate({fill:"red"}, 500, mina.easeinout); 
}, function() { 
    c.animate({ fill:"black" }, 1500, mina.easeinout); 
}); 

代わりにあなたが赤の前に実行するフル1500msを強制したい場合（：https://jsfiddle.net/5bcu4rc5/2/より良い方法はおそらくありますが）：このような何か多分、開始することができ埋める

c.hover(function(){ 
    if (c.className != "unhovering") { 
     c.animate({fill:"red"}, 500, mina.easeinout); 
    } 
}, function() { 
    c.className = "unhovering"; 
    c.animate({ fill:"black" }, 1500, mina.easeinout, function() { 
     c.className = ""; 
    }); 
});