At first, the animation worked fine, but another function uses the css3 transition property to animate the rotation, and after that the animations become really intermittent.
Here are two functions that become mutable:
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 consequences of the transition are called like this:
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); },
"play" and "pause" are simply methods that respond to events.
BackgroundSize animation is provided through the plug-in, but even with what is output, each action happens with a noticeable lag. FadeIn / Out stops the fading of selected elements in unison, and each line of animation occurs at subsequent intervals, and not all at the same time.
Any idea what might trigger this?