0

I've been playing around with animating SVG elements with jQuery. This works in Chrome, but not FF or IE. Can someone explain why? :(

www.chriswickham.co.uk/animationstest

Feel free to inspect the source, but here is the code for the left animation.

Javascript

function music(){
        $('#mL').animate({cy:'45%'}).animate({cy:'65%'});
        $('#mR').animate({cy:'65%'}).animate({cy:'45%'});
    }
    var musicHands;

    $('#music').hover(function(){
    music();
    musicHands = setInterval(music,750);
    },function(){
        clearInterval(musicHands);
        $('#mL').animate({cy:'55%'});
        $('#mR').animate({cy:'55%'});
    });

HTML

<div class="section">
<div id="music">
    <svg width="100%" height="100%">
        <circle cx="50%" cy="30%" r="20%" fill="yellow" />
        <circle id="mL" cx="30%" cy="55%" r="8%" fill="red" />
        <circle id="mR" cx="70%" cy="55%" r="8%" fill="red" />
        <rect y="65%" width="100%" height="25%" fill="black" />
    </svg>
</div>
</div>
ChrisWness
  • 123
  • 1
  • 11
  • Did you include the SVG plugin? http://stackoverflow.com/questions/11789665/jquery-animate-svg-element – Deryck Aug 08 '15 at 14:12
  • I did not, bear with, I'll try it. – ChrisWness Aug 08 '15 at 14:12
  • Well while you're at it, I would recommend just jumping over to Velocity.js - see here http://davidwalsh.name/svg-animation - you know, if you're up for it ;) – Deryck Aug 08 '15 at 14:14
  • No luck with the plugin installed I'm afraid. – ChrisWness Aug 08 '15 at 14:18
  • Make sure you changed your `{ cy: ... }` to `svgCy`. look at the page here for details (click animations and scroll down): http://keith-wood.name/svg.html – Deryck Aug 08 '15 at 14:32
  • I suspect jquery is trying to animate cx and cy as if they were CSS attributes rather than properties. FF and IE need attribute animation per SVG 1.1 (SVG 2 changes this but it's still being written and Chrome are trying out that part of the SVG 2 specification). – Robert Longson Aug 08 '15 at 17:24

0 Answers0