逐渐更改用Raphael.js绘制的线条的颜色

Question

我有一个动画通过Raphaeljs库绘制的线条，我设法在图像通过线后使线条改变颜色，但我希望它在图像传递到线条时逐渐改变颜色。 / p>

这些是代码

HTML

<!--the button which starts the animation-->
<div id="menu_button3" class="btnSave"
         style="margin-left:5px; width:65%; height:8%; margin-top:20px; border-radius:7px;">
        <img style="margin-left:12px; margin-top:9px;" src="image/printer67.png" title="Save" width="55%"/>
</div>

JQuery的

$(document).ready(function () {

            var startx = 0; //declared globally
            var starty = 0; //declared globally
            var node; //declared globally so as to use it to change line color during animation

            $('input[type="checkbox"][name="check"]').change(function () {
                // proceed only when checked
                if (this.checked) {
                    drawLine();
                }
            });
        });

function drawLine() {

            var linewidth = $("#width").val();
            var color = $("#background").val();

            function Line(startX, startY, endX, endY, raphael) {
                var start = {
                    x: startX,
                    y: startY
                };
                var end = {
                    x: endX,
                    y: endY
                };
                var getPath = function () {
                    return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y;
                };


                var redraw = function () {
                    node.attr("path", getPath());
                };

                node = raphael.path(getPath());


                node.attr("stroke-width", linewidth); //sets the width of the line
                node.attr("stroke", color);

                startx = (node.getBBox().x);
                starty = (node.getBBox().y);
                //console.log(startx , starty);

                //sets the color of the line

                return {
                    updateStart: function (x, y) {
                        start.x = x;
                        start.y = y;
                        redraw();
                        return this;
                    },
                    updateEnd: function (x, y) {
                        end.x = x;
                        end.y = y;
                        redraw();
                        return this;
                    }
                };
            }


            $(document).ready(function () {

                var pathLength = 0;
                var paper = Raphael("droppable", 1280, 470, 0, 0);
                $("#droppable").mousedown(
                        function (e) {
                            x = e.offsetX;
                            y = e.offsetY;
                            line = Line(x, y, x, y, paper);
                            $("#droppable").bind('mousemove', function (e) {
                                x = e.offsetX;
                                y = e.offsetY;


                                line.updateEnd(x, y);


                            });

                        });

                $("#droppable").mouseup(
                        function (e) {
                            $("#droppable").unbind('mousemove');
                        });


                $("#menu_button3").click(function () {
                    var start = $("#sldr");


                    if (!start.hasClass('started')) {
                        start.addClass('started');
                        $('#sldr').css({
                            "left": startx,
                            "top": 160 + starty,
                            "visibility": "visible"
                        });


                        $("#sldr").css({
                            'display': 'block',
                            'transition': 'none',
                            'width': '50px'

                        }).animate({
                                    left:  x - 15,
                                    top:  160 + y

                                }, 2000,
                                function () {
                                    node.attr("stroke", "red"); //change line color here
                                    start.removeClass('started');
                                    $('#sldr').css('visibility', 'hidden'); //remove this for ease in width

                                });

                    }

                });

            });
        }