-1

jQuery で svg オブジェクトをアニメーション化しようとしています。アニメーションは次のようになります。

  • プライマリ オブジェクトをクリックします -> プライマリ オブジェクトを上に移動します。
  • 別のオブジェクトをクリック -> プライマリ オブジェクトを実際の位置から別の方法で移動します。

これを見てください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+")");
         }
        }
    );
});

主なオブジェクトは赤い楕円で、クリックして適用される移動は正常に機能し、他のアニメーションは機能せず、その理由がわかりません。

ありがとうございました！

4

2 に答える 2

3

これを試してみてください:- 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 + ")");
        }
    });
});
于 2013-05-29T08:54:54.820 に答える