0

我在这里所做的是将 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];

    }


}
4

1 回答 1

3

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

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

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

于 2012-10-24T14:01:21.830 回答