使用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？

謝謝您的建議！

最好的問候，

迪米特里Vorontzov

Answer 1

看一看Raphael。

Raphaël：跨瀏覽器矢量圖形的簡單方法。

Answer 2

我試圖重現這個動畫。我使用了一個div，在其中我放置了4個「border-divs」，它們將position: absolute作爲一個框架放置。

所有這些「border-divs」的寬度爲0px，1px solid black爲邊界。

當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); 
       }); 
      }); 
     }); 
    }); 
}); 

我不知道我是否清楚，英語不是我的母語語言，但我做了一個jsBin example here

你現在要做的就是在整個網站上重複這個過程！

Answer 3

漂亮的老話題，但我發現這個cluld是解決方案：http://plugins.jquery.com/lazylinepainter/