0

我在 raphael 中为形状设置动画时遇到了很大的问题。第一种方法是分别保留形状和文本，但是我遇到了十个问题，然后我悬停文本，形状没有动画（应该），然后，我创建了包含形状和文本的集合。不是我可以从对象访问路径，但我不能为它设置动画（我只想为形状设置动画，排除文本，但然后我将文本悬停，形状应该是动画）。我该如何解决这个问题？谢谢！

    this[0].animate is not a function

[打破这个错误]

this[0].animate({ fill: attributes.fill }, 300);

    var st = r.set();
        st.push(obj);
        st.push(text);
        console.log(st);
        st.hover(function () {
            console.log(this.id);
            this[0].animate({ fill: '#204250' }, 300);
            this[0].g = this.glow({ color: "#0e2e3b", width: 12 });
        }, function () {
            this[0].animate({ fill: attributes.fill }, 300);
            this[0].g.remove();
        }).click(function (e) {
4

1 回答 1

0

当您this[0]在 raphael 集中使用时，它实际上会引用 DOM 元素，该元素没有 animate 方法，因为它不是 raphael 对象。

我认为这是一种解决方法，因为应用于.hoverRaphael 集它实际上会遍历集合的元素并将相同的事件应用于集合中的所有元素。

有几种方法可以解决这个问题，如果您的代码像您发布的那样简单，这可能就足够了：

var st = r.set();
        st.push(obj);
        st.push(text);
        console.log(st);
        st.hover(function () {
            var element = (this.type === "text") ? this.prev : this
            element.animate({ fill: '#204250' }, 300);
            element.g = element.glow({ color: "#0e2e3b", width: 12 });
        }, function () {
            var element = (this.type === "text") ? this.prev : this
            element.animate({ fill: attributes.fill }, 300);
            element.g.remove();
        });​
于 2012-07-03T02:15:26.307 回答