Geek asks and answers

Problems using jQuery SVG animation plugin on line

I did a bit of work, but the documentation seems a little meager on this, and one or two things don't add up,

I am trying to get a line to track an animated element, my design for this is to use the same animation variables as in the box element for the X1 coordinate of the line,

Javascript (latest jQuery, plugin SVG Plugin + 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>

There are several problems here, firstly, the obvious that the current code sets the position of X1 to the leftmost position, because I'm not talking to add to the original value.

, '+ = ', , - '+ = ' , .

, X1, 500, - 0, , . , , .

, jQuery Javascript, .

+1
1

, 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 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 top end to keep up with the box
                $(strings[i]).animate({
                    svgX1: jqObj.css('left')
                }, 0);
            },
            complete: act
        });
    })();
});

. DEMO.

svg , svg. , , , .

, , . , - . , , .

EDIT - :

: . , , .animate(properties, options), ( javascript). step - .. , . .

i 'el': jQuery .each() , DOM jQuery js . .each() , , . , , ( array jQuery) index value, ( js) key value. .each() . , , i (short index) el (short ).

. . , step, , .. , , . , , "".

+1

More articles:


All Articles