Question

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.

Here are the two functions that become choppy:

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);   
    }

and

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);    
    }

And the transition affects are called like so:

playing: function(){
            var degree = 0;
            spinAction = setInterval(function(){
                degree = degree < 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 < 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);
        },

“playing” and “pause” are just methods that respond to events.

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.

Any idea what could cause this?

Answer 1

Using this jquery plugin to substitute for the transitions
resolves the choppiness