0

次のコードを使用して、ユーザーが上にカーソルを合わせたときに破線をアニメーション化します。

：コードを修正して、ユーザーが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>
4

1 に答える 1

2

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>

jsフィドル

于 2013-02-25T19:15:47.617 に答える