0
动画首先运行正常,但另一个函数使用css3转换属性为“旋转”设置动画,运行后动画变得非常不连贯。使用css3转换后jquery动画波涛汹涌
下面是成为波涛汹涌的两个功能:
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);
},
“玩” 和“暂停“只是响应事件的方法。
backgroundSize的动画是通过一个插件提供的,但即使被取出,每个动作都会发生明显的滞后。淡入/淡出会停止一致淡化所选元素,并且动画的每一行都会在后续时间间隔内发生,而不是一次全部消失。
任何想法可能导致这种情况?