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

现在你所要做的就是在整个网站上重复这个过程！

Answer 2

查看Raphael。

Raphaël：跨浏览器矢量图形很容易。

Answer 3

相当古老的主题，但我发现这可能是解决方案：http://plugins.jquery.com/lazylinepainter/

用jQuery动画的线条画

3 个答案: