0

In my index.html I have:

<ellipse id="ellipseRed" cx="500" cy="1300" rx="40" ry="150" />

In my javascript file I have:

$('ellipse').click(function() {
  $(this).attr('transform', 'translate(0 -350) rotate(0)');
});

The transform works, but it is not smooth. That is it seems to "jump" to its new location rather than transition into it.

I want to click the SVG ellipse and have it slowly move vertically up. Then If I click it again, have it slowly move down.

I'm new html, SVG, and jQuery/Javascript

Am I even going about this the right way? Should I be using jQuery to animate this SVG?

4

2 回答 2

2

While it is certainly possible to animate SVG with jQuery it is awkward and not very efficient. I'd suggest using a library with good SVG support such as Raphael or D3.

This is how you would do it in jQuery:

//jQuery way, not recommended
$('#ellipseRed').click(function() {
    //min-height is just a placeholder value
    //so jquery knows what values to put into
    //the transformation
    $(this)
    .css({"min-height": 0})
    .animate(
      {"min-height": -350},
      {duration: 1000,
       step: function( top ){
           this.setAttribute("transform", "translate(0,"+top+")");
         }
       });
});

Compare how clear this is in D3:

d3.select("#ellipseBlue").on("click", function(){
  d3.select(this)
      .attr("transform", "translate(0,0)")
      .transition()
        .duration(1000)
        .ease("in-out")
        .attr("transform", "translate(0,-350)")
});

You can find a demo here: http://jsfiddle.net/LupTw/

​</p>

于 2012-10-02T05:14:58.897 回答
0

For animation you must use translate. Example you can see here http://www.the-art-of-web.com/css/css-animation/#4

于 2012-10-02T04:58:57.137 回答