javascript - 在 safari 5.1.7 中运行缓慢的 animate()，但在 firefox 和 chrome 中运行良好

Question

我在这里做的是从一侧到中心设置一个 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];

    }


}

Answer 1

我会下载免费的 jquery CSS3 动画插件 Transit。它使用 CSS3 制作动画，并在不支持它们的浏览器上回退以制作动画。

http://ricostacruz.com/jquery.transit/

它还支持动画队列和完整的功能。