Raphael Animation - 在元素上快速移入和移出鼠标时元素变大答案

【问题标题】：Raphael Animation - Element getting bigger when moving mouse in&out fast on the elementRaphael Animation - 在元素上快速移入和移出鼠标时元素变大
【发布时间】：2014-06-04 08:42:25
【问题描述】：

我尝试使用 raphael 的动画将带有鼠标进入/离开的元素设置为类似这样的动画： raphaelElement.animate({ transform: "...S1.6,1.6" }, 25, 'bounce') for mouseenter 和 raphaelElement.animate({ transform: "t0, 0" }, 25, 'bounce');为mouseleave。演示http://jsfiddle.net/junca/Q4L6T/

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

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

hoverFunc = function() {
    rect.animate({transform: "...s1.6,1.6"}, 500, 'bounce');
    console.log('mouse enter');
};
hideFunc = function() {
    rect.animate({transform: "t0, 0"}, 500, 'bounce');      
    console.log('mouse leave');
};
rect.hover(hoverFunc, hideFunc);

问题是当鼠标快速来回移动时元素越来越大。

谢谢。

【问题讨论】：

标签： javascript raphael mousehover

【解决方案1】：

我怀疑你想删除它，而不是使用“...”符号来添加转换，而是包含原始转换字符串，所以它总是从新开始。

所以不是

rect.animate({transform: "...s1.6,1.6"}, 500, 'bounce');

试试

rect.animate({transform:  originalForm.toString() + "s1.6,1.6"}, 500, 'bounce');

我还更正了小提琴here中的一些错别字

【讨论】：