使用 jQuery 绘制动画线条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6045286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animated line drawing with jQuery
提问by Dimitri Vorontzov
I want to use jQuery to create an effect of a line drawing being drawn as if with an invisible pen.
我想使用 jQuery 来创建线条图的效果，就像使用隐形笔一样。
Sort of like this:
有点像这样：
http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html
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.
我用其他一些库制作了这个模型，但我想知道是否有更简单的方法用 jQuery 来做到这一点。而且我还希望能够为曲线和不规则线条制作动画。
I would like to animate a drawing like this, for example:
我想为这样的图画动画，例如：
http://commons.wikimedia.org/wiki/File:Mouse_line_drawing.jpg
http://commons.wikimedia.org/wiki/File:Mouse_line_drawing.jpg
Is there a jQuery plugin that helps to create such effect?
是否有一个 jQuery 插件可以帮助创建这种效果？
If not, could you advice a simple and effective way to do that with jQuery?
如果没有，您能否建议一种简单而有效的方法来使用 jQuery 做到这一点？
Thank you for your advice!
感谢您的意见！
Best regards,
此致，
Dimitri Vorontzov
迪米特里·沃龙佐夫
采纳答案by Rasika
回答by Sylvain
I tried to reproduce this animation. I used a div, in which I placed 4 "border-divs", having position: absoluteto place them as a frame.
我试图重现这个动画。我使用了一个 div，我在其中放置了 4 个“边框 div”，必须position: absolute将它们作为框架放置。
All these "border-divs" have a width of 0px, and a 1px solid blackborder.
所有这些“边框-div”的宽度都是 0px，还有一个1px solid black边框。
When the DOM is ready, I animate the border-divs one by one, changing their sizes to the container's dimensions:
当 DOM 准备好后，我将边框 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);
});
});
});
});
});
I don't know if I am clear, english is not my native language, but I've made a jsBin example here
我不知道我是否清楚，英语不是我的母语，但我在这里做了一个jsBin 示例
All you have to do now is to repeat the process on an entire website !
您现在要做的就是在整个网站上重复该过程！
回答by Tpojka
Pretty old topic, but I found this cluld be solution: http://plugins.jquery.com/lazylinepainter/
很老的话题，但我发现这可能是解决方案：http://plugins.jquery.com/lazylinepainter/
