Animated line drawing with jQuery

Question

I want to use jQuery to create an effect of a line drawing being drawn as if with an invisible pen.

Sort of like this:

http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html

I made this mock-up with some other library, but I wonder if there's an easier way to do that with jQuery. And I also want to be able to animate curved and irregular lines.

I would like to animate a drawing like this, for example:

http://commons.wikimedia.org/wiki/File:Mouse_line_drawing.jpg

Is there a jQuery plugin that helps to create such effect?

If not, could you advice a simple and effective way to do that with jQuery?

Thank you for your advice!

Best regards,

Dimitri Vorontzov

Answer 1

I tried to reproduce this animation. I used a div, in which I placed 4 "border-divs", having position: absolute to place them as a frame.

All these "border-divs" have a width of 0px, and a 1px solid black border.

When the DOM is ready, I animate the border-divs one by one, changing their sizes to the container's dimensions:

$(function() {
    $(".border, #content").hide();
    $("#topbar").show();
    $("#topbar").animate({width: "318px"}, 1000, function() {
        $("#rightbar").show();
        $("#rightbar").animate({height: "238px"}, 1000, function() {
            $("#bottombar").show();
            $("#bottombar").animate({width: "318px"}, 1000, function() {
                $("#leftbar").show();
                $("#leftbar").animate({height: "238px"}, 1000, function() {
                    $("#content").fadeIn(1000);
                });
            });
        });
    });
});

I don't know if I am clear, english is not my native language, but I've made a jsBin example here

All you have to do now is to repeat the process on an entire website !

Answer 2

Have a look at Raphael.

Raphaël: Cross-browser vector graphics the easy way.

Answer 3

Pretty old topic, but I found this cluld be solution: http://plugins.jquery.com/lazylinepainter/