safari 5.1.7中的Slow animate()，但firefox和chrome中的不错

Question

我在这里做的是让div容器从一侧向中心移动，当再次单击箭头时，它将再次移出屏幕。div还包含两个图像，模糊版本和法线，它们在移动过程中切换，以提供运动模糊的外观。在最新的Chrome和firefox浏览器中，一切看起来都很好，但在safari中，情况却相当不稳定。

我知道javascript动画是一个成功或失败的尝试，但我很好奇是否有任何方法可以优化我现在所拥有的东西。此外，我尝试实现的目标是否可以使用css3动画来实现？我被引导相信css3使用硬件图形处理器，因此消除了任何主要的速度减慢。

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动画插件运输。它使用CSS3制作动画，并在不支持它们的浏览器上回退到动画。

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

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