After digging through the documentation, it seems a bit lacking on this topic and a few things just don't seem to add up,
My goal is to make a line follow an animated element by using the same animation variables as those of the box element for the X1 coordinate of the line,
Javascript (using the latest jQuery, SVG Plugin + SVG Animation Plugin)
$(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>
There are a few issues here, first off, the current code sets the X1 position all the way to the left because I haven't specified to add to the original value.
I'm avoiding using '+=change' because it somehow breaks the code, even with a simple numerical value.
Lastly, even if I set the first X1 animation value to 500 and the second to 0, only the first one runs, skipping the second animation. This results in the lines flying to the left and then getting stuck without moving further.
It's likely due to my limited knowledge of jQuery and Javascript, so any constructive assistance would be greatly appreciated.