jquery - 使用 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-div”，并​​使用 position:absolute 将它们放置为框架。

所有这些“border-div”的宽度均为 0px，以及 1px 实心黑色 边框。

当 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 example here

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