jquery animations choppy after using css3 transitions
<p>The animations work fine at first, but another function uses the css3 transition property to animate a "rotate" and after this runs, the animations become really choppy.</p>

<p>Here are the two functions that become choppy:</p>

<pre><code>function fadePlayer(){
        $(".logof, .location").fadeOut(2000);
        $(".turntable, .arm, .bio, .controls").fadeIn(2000);
        $(".logor").animate({
            backgroundSize: "104px 103px",
            height: "103px",
            width: "104px",
            top: "5px",
            left: "33px"
        }, 1000);   
    }
</code></pre>

<p>and</p>

<pre><code>function unFadePlayer(){
        $(".logof, .location").fadeIn(500);
        $(".turntable, .arm, .bio, .controls").fadeOut(500, function(){

        });
        $(".logor").animate({
            backgroundSize: "49px 49px",
            height: "49px",
            width: "49px",
            top: "23px",
            left: "63px"
        }, 250);    
    }
</code></pre>

<p>And the transition affects are called like so:</p>

<pre><code>playing: function(){
            var degree = 0;
            spinAction = setInterval(function(){
                degree = degree &lt; 5 ? degree + 5 : 0; 
                $(".logor").css({
                    '-webkit-transition':'all 1s ease-in-out',
                    '-webkit-transform':'rotate('+degree+'deg)',
                    '-ms-transition':'all 1s ease-in-out',
                    '-ms-transform':'rotate('+degree+'deg)',
                    '-moz-transition':'all 1s ease-in-out',
                    '-moz-transform':'rotate('+degree+'deg)',
                    '-o-transition':'all 1s ease-in-out',
                    '-o-transform':'rotate('+degree+'deg)',
                    'transition':'all 1s ease-in-out',
                    'transform':'rotate('+degree+'deg)',
                });
            }, 1000);
            var angle = 0;
            wobbleAction = setInterval(function(){
                angle = angle &lt; 2 ? angle + 2 : 0; 
                $(".arm").css({
                    '-webkit-transform-origin':'14 14', 
                    '-webkit-transition':'all 1s ease-in-out',
                    '-webkit-transform':'rotate('+angle+'deg)',
                    '-ms-transform-origin':'14 14', 
                    '-ms-transition':'all 1s ease-in-out',
                    '-ms-transform':'rotate('+angle+'deg)',
                    '-moz-transform-origin':'14 14', 
                    '-moz-transition':'all 1s ease-in-out',
                    '-moz-transform':'rotate('+angle+'deg)',
                    '-o-transform-origin':'14 14', 
                    '-o-transition':'all 1s ease-in-out',
                    '-o-transform':'rotate('+angle+'deg)',
                    'transform-origin':'14 14', 
                    'transition':'all 1s ease-in-out',
                    'transform':'rotate('+angle+'deg)',
                });
            }, 1000);   

        },
        pause: function(){
            clearInterval(spinAction);
            clearInterval(wobbleAction);
        },
</code></pre>

<p>"playing" and "pause" are just methods that respond to events.</p>

<p>The animation of backgroundSize is provided through a plug-in, but even with that taken out, each action happens with noticeable lag.  The fadeIn/Out stops fading the selected elements in unison, and each line of the animation happens in subsequent intervals, rather than all at once.  </p>

<p>Any idea what could cause this?</p>
