-1

I'm trying to animate an svg object with jQuery. The animation should be something like this:

  • click on the primary object -> translate the primary object up.
  • click on another object -> translate the primary object in another way starting from the actual position.

Look at this http://jsfiddle.net/MaxMarkson/khZqW/2/

$('#ellipseRed').click(function() {
    $(this)
    .css({"min-height": 0})
    .animate(
        {"min-height": -150},
        {duration: 1000,
         step: function(top){
             this.setAttribute("transform", "translate(0,"+top+")");
         }
        }
    );
});

$('#ellipseBlue').click(function() {
    // Getting
    var xforms = $('#ellipseRed')[0].getAttribute('transform');
    var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX,firstY;
    if(parts == null){
        $('#ellipseRed')[0].setAttribute('transform','translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    else{
        firstX = parts[1];
        firstY = parts[2];
    }
    // Setting
    //
    var animation = {};
    animation.x = firstX + 200;
    animation.y = firstY - 100;

    $('#ellipseRed')
    .css({"min-height": 0})
    .css({"left":0})
    .animate(
        {"min-height": animation.y},
        {"left": animation.x},
        {duration: 1000,
         step: function(top, left){
             this.setAttribute("transform", "translate("+left+","+top+")");
         }
        }
    );
});

The primary object is the red ellipse, the translation applied by clicking on it works fine, the other animation doesn't work and I can't figure out why.

Thank you!

Max Markson
  • 800
  • 1
  • 19
  • 34
  • As far as I can see, you get an error, because your second function uses the DOM object itself, not a jQuery object, use $('#ellipseRed').css() instead of $('#ellipseRed')[0]. – axel.michel May 29 '13 at 08:24
  • I've used the DOM object due to the `.getAttribute()` and `.setAttribute()` methods. Anyway the jquery object with the `attr()` method still doesn't work – Max Markson May 29 '13 at 08:29
  • I don't know what kind of effect you want - but the problem is in the animation logic you used, I have modified your fiddle a bit, and as you can see, it works. http://jsfiddle.net/MaxMarkson/khZqW/2/ – axel.michel May 29 '13 at 08:42
  • Probably you didn't save your modifies...the codes are the same. The effect is simple: clicking on the blue ellipse the red one should moves to the top-right corner of the page, moving from the position where it is in that moment and not from the position that the ellipse has when the page is loaded. – Max Markson May 29 '13 at 08:50
  • EDIT: I saw your code (the review 3, you linked the review 2). Well, it works but it do exact the same thing of the `$('#ellipseRed')` click function. It doesn't care about the animation that has already been applied to the red ellipse. – Max Markson May 29 '13 at 08:58
  • 1
    sorry, you are right, here it is: http://jsfiddle.net/axelmichel/khZqW/5/ – axel.michel May 29 '13 at 08:59
  • See my last comment on wiz kid answer. Thank you so much for the help you're giving to me! – Max Markson May 29 '13 at 09:30
  • -1 for trying to work around the "jsfiddle must have code with it" rule – tckmn May 29 '13 at 12:47
  • @Doorknob Edited. I made that thing only because it was a long piece of code and it was already listed in the fiddle page...I thought it was tidier. – Max Markson May 29 '13 at 12:51
  • questions should be self-contained. they should not rely on other websites. – tckmn May 29 '13 at 12:54
  • Ok, thanks for clarify :) – Max Markson May 29 '13 at 12:56

2 Answers2

3

Try this out:- http://jsfiddle.net/adiioo7/khZqW/8/

JS

$('#ellipseRed').click(function () {
    $(this)
        .css({
        "min-height": 0
    })
        .animate({
        "min-height": -150
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(0," + top + ")");
        }
    });
});

$('#ellipseBlue').click(function () {
    // Get the value of the transform attribute
    var ellipse_red = $('#ellipseRed');
    var xforms = ellipse_red.attr('transform');
    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX, firstY;
    // If the transform attribute doesn't exist then add it.
    if (parts == null) {
        ellipse_red.attr('transform', 'translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    // Otherwise take the values read.
    else {
        firstX = parseInt(parts[1]);
        firstY = parseInt(parts[2]);
    }
    // Set the arrive point
    var animation = {};
    animation.x = firstX + 200;
    animation.y = firstY - 100;

    // Try to animate!
    ellipse_red.animate({
        "min-height": -200
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(" + -top + "," + firstY + ")");
        }
    });
});
ChrisF
  • 134,786
  • 31
  • 255
  • 325
Aditya Singh
  • 9,512
  • 5
  • 32
  • 55
  • You are really close but when blue is clicked the red ellipse is moving only to the right...it seems that the vertical movement is ignored – Max Markson May 29 '13 at 09:01
  • Ok, last thing: is possible to move the red ellipse from the last position it reached? If you see the last axel.michel's fiddle the ellipse reach the correct final position but it start from the original starting point. In your fiddle the ellipse is moving correctly but il start and finish at the same positions. Hope you've understand, my english isn't good and I've some difficult explaining myself. – Max Markson May 29 '13 at 09:29
  • Now we're really close!!! The final effect should be very similar to this http://jsfiddle.net/MaxMarkson/khZqW/11/ but with a fluid movement even on the y axis. Thank you so much for the help you're giving to me :) – Max Markson May 29 '13 at 09:47
  • @MaxMarkson Please accept the appropriate answer for your question. – Aditya Singh May 29 '13 at 14:39
  • Your answer put me on the right road but it isn't completely correct. The correct one is mine but I can't accept it in 2 days so I have to wait. – Max Markson May 29 '13 at 15:05
-2

Ok, I've reached the goal: http://jsfiddle.net/MaxMarkson/khZqW/12/

$('#ellipseRed').click(function () {
    $(this)
        .css({
        "min-height": 0
    })
        .animate({
        "min-height": -150
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(0," + top + ")");
        }
    });
});

$('#ellipseBlue').click(function () {
    // Get the value of the transform attribute
    var ellipse_red = $('#ellipseRed');
    var xforms = ellipse_red.attr('transform');
    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX, firstY;
    // If the transform attribute doesn't exist then add it.
    if (parts == null) {
        ellipse_red.attr('transform', 'translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    // Otherwise take the values read.
    else {
        firstX = parseInt(parts[1]);
        firstY = parseInt(parts[2]);
    }
    // Set the arrive point
    var animation = {};
    var delta = {};
    delta.x = 20;
    delta.y = -50;
    animation.x = firstX + delta.x;
    animation.y = firstY + delta.y;

    // Try to animate!
    ellipse_red.animate({
        "increment": animation.x,
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(" + top + "," + (top*(delta.y/delta.x)) + ")");
        }
    });
});

I'm not sure that this is the best solution but it works: I use only one parameter and evaluate the movement on each axis using a "conversion parameter", in this case the division between two delta increment for y axis and 1 for x axis.

Max Markson
  • 800
  • 1
  • 19
  • 34