使用css3过渡后的jquery动画断断续续 [英] jquery animations choppy after using css3 transitions

问题描述

首先，动画效果很好，但是另一个函数使用css3 transition属性为旋转"设置动画，然后运行，动画变得非常不稳定.

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

和

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

过渡效果如下:

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.

backgroundSize的动画是通过插件提供的，但是即使将其取出，每个动作也会发生明显的滞后. fadeIn/Out会停止一致地使所选元素淡入淡出，并且动画的每一行都在随后的间隔中发生，而不是一次全部发生.

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?

推荐答案

使用此 jquery插件替代过渡 解决断断续续

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

这篇关于使用css3过渡后的jquery动画断断续续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！