jquery - 在不同的事件中使用拉斐尔动画虚线

Question

当用户将鼠标悬停在

：如何修改代码，以便当用户执行不同的事件（例如加载 html）时，它会启动画线的函数。谢谢！

$(function() {

    animateLine = function(canvas, hoverDivName, colorNumber, pathString) {
        $('#' + hoverDivName).hover(

        function() {
            var line = canvas.path(pathString).attr({
                stroke: colorNumber
            });

            var length = line.getTotalLength();

            $('path[fill*="none"]').animate({
                'to': 1
            }, {
                duration: 5000,
                step: function(pos, fx) {
                    var offset = length * fx.pos;
                    var subpath = line.getSubpath(0, offset);
                    canvas.clear();
                    canvas.path(subpath).attr({
                        stroke: colorNumber,
                        "stroke-dasharray":"--",
                        "stroke":"#a36d66"
                    });

                },
            });
        }, function() {
            $('path[fill*="none"]').stop(true, false);
        });
    };

    var canvas = Raphael('canvas', 900, 648);
    var pathString = "m441.5,223.5c67,-85 47,246 180,110c12,-43 24,-81 8,  T1600 ";

    animateLine(canvas, "canvas", "#000", pathString);

});



<div id="canvas"> 
        <p>Hover over me</p>        
    </div>

Answer 1

Raphael 只是普通的旧 Javascript，因此您可以将代码放在函数中并在您喜欢的任何页面事件上执行它们。例如：

<input id="start" type="button" value="Begin!" />
<div id="canvas"></div>
<script>
    var canvas = Raphael('canvas', 900, 648);
    var pathString = "m441.5,223.5c67,-85 47,246 180,110c12,-43 24,-81 8,  T1600 ";

    $('#start').click(function(e) {
        animateLine(canvas, "canvas", "#000", pathString);
    });

    var animateLine = [etc. etc.]
<script>

jsFiddle