用jQuery动画的线条画

Question

我想使用jQuery创建一个绘制线条效果的效果,就像使用隐形笔一样.

有点像:

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

我用其他库创建了这个模型,但我想知道是否有更简单的方法来使用jQuery.我还希望能够为弯曲和不规则线条制作动画.

我想为这样的图画制作动画,例如:

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

有没有一个jQuery插件,有助于创建这样的效果？

如果没有,你能建议一个简单有效的方法来使用jQuery吗？

感谢您的意见!

最好的祝福,

迪米特里沃龙佐夫

Answer 1

我试图重现这个动画.我使用了一个div,其中我放置了4个"border-divs",不得不position: absolute把它们放在一个框架上.

所有这些"border-divs"的宽度都是0px,还有一个1px solid black边框.

当DOM准备就绪时,我会逐个为border-div设置动画,将其大小更改为容器的尺寸:

$(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);
                });
            });
        });
    });
});

我不知道我是否清楚,英语不是我的母语,但我在这里做了一个jsBin的例子

您现在要做的就是在整个网站上重复这个过程!

Answer 2

看看拉斐尔.

Raphaël:跨浏览器矢量图形的简单方法.