Question

我试图在hoverIntent.js使用This Demo与Raphaël.js一起处理handlerIn函数并不立即处理，直到用户的鼠标减慢到足以调用任何函数（如Hover）之前）但是我收到了这个错误：

Uncaught TypeError: Failed to execute 'animate' on 'Element': The provided value is not of type '(AnimationEffect or sequence<Dictionary>)'

enter image description here

你能告诉我为什么会这样吗？ Raphaël.js有没有内置功能来做同样的工作？

Answer 1

Raphael有一个动画功能，所以如果设置正确，这应该有效。问题是'this'不会引用Raphael元素，它会引用JQuery元素，所以我们需要更改它。

我们可以使用javascripts .bind（）方法做到这一点，所以这里是一个例子，如果我们想将它应用于每个元素它会是什么样的（如果你只想将它添加到一个元素中你可以摆脱它单个元素）。

这是关键位（只看中间线，即函数绑定位）..这意味着Raphael元素“boxes [el]”将传递给'this'。

Object.keys( boxes ).forEach( function( el ) {
    $( boxes[ el ].node ).hoverIntent( hoverFunc.bind( boxes[ el ] ) );
} );

所以这一切看起来都像这样......


   var Draw = Raphael("canvas", 200, 200);
    var boxes = {
        BC: Draw.path("M50 50, L50,60, L60,60 L60,50 L50,50").attr({
            fill: "#000"
        }),

        ON: Draw.path("M70 70, L70,80, L80,80 L80,70 L70,70").attr({
            fill: "#000"
        }),
        NB: Draw.path("M90 90, L90,100, L100,100 L100,90 L90,90").attr({
            fill: "#000"
        })
    }

    function hoverFunc() {
        this.animate({
            "fill": "#F38A03"
        }, 500);
    }

    Object.keys( boxes ).forEach( function( el ) {
        $( boxes[ el ].node ).hoverIntent( hoverFunc.bind( boxes[ el ] ) );
    } );

jsfiddle

jsfiddle悬停

Answer 2

问题是您尝试在路径上调用.animate。您可以通过切换“捕获未捕获的异常”来轻松调试此类问题。在Google Chrome调试器中，您可以与JavaScript进行交互，包括状态（这样您就可以在控制台上访问this并查看它的设置并尝试在其上设置属性。）

要获取.animate属性，您需要将节点包装在jQuery调用中，所以类似于$(this).animate(...)，但jQuery似乎无法为SVG制作动画。所以你需要弄清楚另一种方法。

以下是一个没有.animate：http://jsfiddle.net/h4nBx/13/

的示例

使用SVG时，现在是时候超越jQuery了，因为它不会非常有用（根据我的经验）。一个好的起点是阅读标准：

SVG 1.1动画：http://www.w3.org/TR/SVG/animate.html

基于此，您可以尝试在路径元素中添加animate标记：

<animate attributeType="CSS" attributeName="fill" 
         from="???" to="#F38A03" dur="5s" />

在路径标记内部看到here with it inside of a rect tag。

但是，我怀疑这可能不起作用。我会考虑在路径中添加一个类，并使用CSS通过该类进行动画。请参阅examples of that here。

如何使用Raphaël.js为路径填充设置动画？

2 个答案: