1

ラファエルの要素にカーソルを合わせると、小さなアニメーションが表示されるようにしています。

ここで例を参照してください：

http://jsfiddle.net/GVEqf/24/

正方形にカーソルを合わせると拡大し、停止すると縮小します。

問題は、要素がまだ拡大しているときにカーソルを合わせるのをやめると、縮小が始まり、元のサイズよりも小さくなることです。

要素の上にカーソルを置き、すぐにマウスを要素の外に移動すると、それがわかります。

ホバリングアニメーションに使用する関数は次のとおりです。

hoverFunc = function() {
    rect.animate({transform: "...s1.6,1.6"}, 1000, 'bounce');
};
hideFunc = function() {
    rect.animate({transform: "...s0.625,0.625"}, 1000, 'bounce');      
};
4

2 に答える 2

3

変換を var に保存し、元の状態に変換します。

var canvas = Raphael(document.getElementById("canvas"), 250, 250);

var rect = canvas.rect(1, 1, 50, 50);
rect.attr({'fill': 'black'});

rect.transform("t20, 20");

var origionalForm = rect.transform(); // remember current transform

hoverFunc = function() {
    rect.animate({transform: "...s1.6,1.6"}, 1000, 'bounce');
};
hideFunc = function() {
    rect.animate({transform: origionalForm.toString()}, 1000, 'bounce'); // back to origional state      
};
rect.hover(hoverFunc, hideFunc);

デモ: http://jsfiddle.net/GVEqf/27/

于 2013-05-15T12:03:37.170 に答える