使用一行jQuery的SVG动画插件问题(Problems using the jQuery SVG

我做了一些关于戳但文档似乎关于这个问题有点稀疏，一两件事情没有加起来，

我试图让一个行跟踪的动画元素，我对这样的设计是使用同样的动画变量作为该行的X1统筹箱体构件上，

使用Javascript（最新的jQuery，SVG插件+ SVG动画插件）

$(function(){
var balloons = [
$("#box1"),
$("#box2"),
$("#box3")
];

var lines = [
$("#line1"),
$("#line2"),
$("#line3")
];

function act(jqObj, lineX, speed, change) {
jqObj
.animate({'left': change}, speed)
.animate({'left': -change}, speed);

lineX
.animate({svgX1: change}, speed)
.animate({sgvX1: -change}, speed, function() {
    act(jqObj, lineX, speed, change);
});
};
for (i = 0; i < balloons.length; i++) {
var speed = 2000 + Math.random() * 501;
var change = 10 + Math.random() * 26;
act(balloons[i], lines[i], speed, change);
}
});

HTML / CSS

<html>
<head>

<title>Proof of Concept Page</title>
<style type="text/css">
 .html .body {position: absolute;}

.box {
 position: absolute;
        width:100px;
        height:100px;
        position: absolute;
        background-color:red;
}
#box1 {
margin-left:300px; margin-top:60px 
}
#box2 {
margin-left:500px; margin-top:20px 
}
#box3 {
margin-left:700px; margin-top:50px 
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="jquery.svganim.js"></script>
<script type="text/javascript" src="main.js"></script>


</head>
<body>
<div  class="box" id="box1">Proj 1</div>
<div  class="box" id="box2">Proj 2</div>
<div  class="box" id="box3">Proj 3</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line id="line1" x1="350" y1="160" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
    <line id="line2" x1="550" y1="120" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
    <line id="line3" x1="750" y1="150" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

</body></html>

有几个问题在这里，首先，显而易见的一个，这是当前的代码设置了X1的位置到最左边，因为我不会告诉添加到原始值。

我没有使用“+ =变化”的原因是，“+ =什么”打破了某些原因的代码，甚至是一个通用的数值。

最后，即使我刚刚设置的第一X1动画的价值，说500，第二个为0，只有第一个会火，第二动画被跳过。这种效果是在这里看到过，其中线飞向远左边，然后不动。

我敢肯定，这部分是我的jQuery和JavaScript的极其业余的理解，但我将不胜感激任何建设性的帮助。

这是我以前从来没有使用SVG相当具有挑战性。

打开和关闭与它玩了几天后，我结束了这一点：

var $boxes = $(".box"),//coded in HTML
    strings = [];//populated below with sgv lines

$('#canvas').svg({
    onLoad: function(svg) {
        var g = svg.group({
            stroke: 'red',
            strokeWidth: 2
        });
        $boxes.each(function(i, el) { // make one string per box.
            strings.push(svg.line(g, parseInt($(el).css('left')), 18+parseInt($(el).css('top')), 50, 200));
        });
    }
});

//animate the boxes
$boxes.each(function(i, el) {
    var speed = 2000 + Math.random() * 501,
        change = 10 + Math.random() * 26,
        jqObj = $(el),
        initial_left = parseInt(jqObj.css('left')) || 0;
    (function act() {
        jqObj.animate({
            'left': initial_left + change
        }, {
            duration: speed,
            step: function() { //move the string's top end to keep up with the box
                $(strings[i]).animate({
                    svgX1: jqObj.css('left')
                }, 0);
            }
        }).animate({
            'left': initial_left - change
        }, {
            duration: speed,
            step: function() { //move the string's top end to keep up with the box
                $(strings[i]).animate({
                    svgX1: jqObj.css('left')
                }, 0);
            },
            complete: act
        });
    })();
});

见DEMO 。

这实际上是与SVG字符串和非SVG的文本框的混合解决方案。这些元素的动画，每个字符串显示为附接到文本框这样的方式。

该代码是不容易跟踪和可无疑可以简化。最后，我只是高兴能得到的东西的工作。我和我很好的教育希望这是对你有用。

编辑 - 注释：

你的理解 ：只要约正确的。实际上，我使用动画的替换形式，它的工作原理如下， .animate(properties, options) ，其中，属性和选项都映射（javascript对象）。该方法的这种形式允许step中指定的选择-即。这将发生在动画的每个步骤的操作。在这种情况下，感兴趣的操作改变气球串的顶端的位置。

i和“报”：jQuery的.each()方法提供一种方便的方式来迭代一个普通的js对象在数组中的元素，在一个jQuery容器中的DOM节点，或属性。的这两种形式.each()接受的回调函数，其指定的操作在每次迭代执行。反过来，回调函数接受表示（对数组和jQuery容器）两个参数index和value ，或者（对于普通JS对象） key和value 。的.each()方法在内部调用回调函数，并插入每个迭代一次的参数。当编写一个回调，可以调用的参数，你喜欢什么，我称他们为i （简称index ）和el （以下简称元）。