我在这里所做的是将 div 容器从一侧动画到中心,当再次单击箭头时,它将再次移出屏幕。div 还包含两个图像,模糊版本和普通图像,它们在移动过程中切换以呈现运动模糊的外观。在最新的 Chrome 和 firefox 浏览器中一切看起来都不错,但在 safari 中却相当不稳定。
我知道 javascript 动画是一种成功或失败的努力,但我很想知道是否有任何方法可以优化我现在拥有的东西。此外,我想要实现的目标是否可以使用 css3 动画来完成?我被引导相信 css3 使用硬件 gpu,因此消除了任何主要的减速。
var cupcakeArray = new Array(new Array("Cupcake_01_blur.png","Cupcake_01.png"));
function loadCupCake(ini,direction){
/*Set directional variables*/
var dir = direction;
var start;
var end;
var stageWidth = $('div#cupcakeStage').width(); //gets the current stage width
var centrepos = (stageWidth/2) - (743/2);
if(dir == "left"){
start = stageWidth;
end = 0-743;
}else if(dir == "right"){
start = 0-743;
end = stageWidth;
}
/*Remove the current cupcake in the centre*/
$('div.current-cupcake').removeClass('current-cupcake').addClass('remove-cupcake');
$("div.remove-cupcake").animate({"left": end+'px'},{duration:500,easing:"easeOutQuart",complete: function() {
$(this).remove();
}});
$("div.remove-cupcake img#img_blur").animate({opacity:1},{duration:100,easing:"easeOutQuart"});
$("div.remove-cupcake img#img_normal").animate({opacity:0},{duration:300,easing:"easeOutQuart"});
//preload images
var num_loaded = 0;
var $fragment;
var $innerfrag;
var img=[];
$fragment = $('<div class="preload-cupcake" style="position: relative; left:'+start+'px;"/>');
for(var i=0;i<2;i++){
img[i] = new Image();
img[i].onload = function(){
num_loaded++;
if(num_loaded == 1){
$innerfrag = $('<img id="img_blur" src="'+this.src+'" alt=""/>');
$fragment.append($innerfrag);
}
if(num_loaded == 2){
$innerfrag = $('<img id="img_normal" src="'+this.src+'" alt=""/>');
$fragment.append($innerfrag);
$('div#cupcakeStage').append($fragment);
$('div.preload-cupcake').removeClass('preload-cupcake').addClass('current-cupcake');
$("div.current-cupcake").animate({"left": centrepos+"px"},{duration:400,easing:"easeOutQuart"});
$("div.current-cupcake img#img_blur").animate({opacity:0},{duration:700,easing:"easeOutQuart"});
$("div.current-cupcake img#img_normal").animate({opacity:1},{duration:700,easing:"easeOutQuart",complete: function() {
}});
}
}
img[i].src = cupcakeArray[ini][i];
}
}