渐入渐出js特效插件

调用，初始化插件
var config = scenceConfig();
var scene3_config = scenceConfig();
scene3_config.left.x = -100;
scene3_config.right.x =100;
scene3_config.head.y =-100;
scene3_config.bottom.y =100;

exitTo(“scene-2”,config, “scene-3”,scene3_charts,scene3_config );

function scenceConfig(){
    return {
        title:{
            show:true,
            inTime:1000,
            outTime:1500,
            delay:1500,
            x:0,
            y:0,
            inScale:1,
            outScale:1
        },
        left:{
            show:true,
            inTime:1000,
            outTime:1500,
            delay:1500,
            x:80,
            y:0,
            inScale:1,
            outScale:1
        },
        right:{
            show:true,
            inTime:1000,
            outTime:1500,
            delay:1500,
            x:-80,
            y:0,
            inScale:1,
            outScale:1
        },
        center:{
            show:true,
            inTime:1000,
            outTime:1500,
            delay:500,
            x:0,
            y:0,
            inScale:0.8,
            outScale:2
        },
        head:{
            show:true,
            inTime:1000,
            outTime:1500,
            delay:1500,
            x:0,
            y:80,
            inScale:1,
            outScale:1
        },
        bottom:{
            show:true,
            inTime:1000,
            outTime:1500,
            delay:1500,
            x:0,
            y:-80,
            inScale:1,
            outScale:1
        }
    };
}

function exitTo(exitScene,exitConfig,toScene,toSceneCharts,toConfig){
    sceneHide(exitScene,exitConfig);
    sceneShow(toScene,toSceneCharts,toConfig);
}

function sceneShow(sceneId,intcharts,config){
    $("#"+sceneId).show();
    if(intcharts != null && intcharts !=""){
        intcharts();
    }
    if(config.title.show){
        move(sceneId +"-top",config.title.x,config.title.y,config.title.inScale,1,config.title.delay,config.title.inTime);
    }

    if(config.left.show){
        move(sceneId +"-left",config.left.x,config.left.y,config.left.inScale,1,config.left.delay,config.left.inTime);
    }
    if(config.right.show){
        move(sceneId +"-right",config.right.x,config.right.y,config.right.inScale,1,config.right.delay,config.right.inTime);
    }
    if(config.head.show){
        move(sceneId +"-head",config.head.x,config.head.y,config.head.inScale,1,config.head.delay,config.head.inTime);
    }
    if(config.bottom.show){
        move(sceneId +"-bottom",config.bottom.x,config.bottom.y,config.bottom.inScale,1,config.bottom.delay,config.bottom.inTime);
    }

    if(config.center.show){
        move(sceneId +"-center",config.center.x,config.center.y,config.center.inScale,1,config.center.delay,config.center.inTime);
    }
}

function sceneHide(sceneId,config){

    if(config.title.show){
        move(sceneId +"-top",config.title.x,config.title.y,config.title.outScale,0,0,config.title.outTime,function(){
            $("#"+sceneId).hide();
        });
    }

    if(config.left.show){
        move(sceneId +"-left",-config.left.x,config.left.y,config.left.outScale,0,0,config.left.outTime);
    }
    if(config.right.show){
        move(sceneId +"-right",-config.right.x,config.right.y,config.right.outScale,0,0,config.right.outTime);
    }
    if(config.head.show){
        move(sceneId +"-head",config.head.x,-config.head.y,config.head.outScale,0,0,config.head.outTime);
    }
    if(config.bottom.show){
        move(sceneId +"-bottom",config.bottom.x,-config.bottom.y,config.bottom.outScale,0,0,config.bottom.outTime);
    }

    if(config.center.show){
        move(sceneId +"-center",config.center.x,config.center.y,config.center.outScale,0,0,config.center.outTime);
    }
}
// div 的id , scale:放大缩小， opacity:0 是消失，1 出现， delay 拖延时间， time ：执行动画所需时间，callback：回调函数
function move(id,x,y,scale,opacity,delay,time,callback){
    //消失
    if(opacity == 0){
        //x > 0 则往右 ， y > 0 往下
        $("#" + id).transition({ y: "+="+ y+"px", x:"+="+ x+"px", scale:scale, opacity:opacity, delay:delay},time,function(data){
            if(callback != null){
                callback(data);
            }
        });
    }else{ //出现
        //x>0 往左 ， y > 0 往上
        $("#" + id).css({ x: x+"px" , y:y + "px", scale: scale, opacity: 0});
        $("#" + id).transition({ x: "0px",y:"0px" ,scale:1, opacity: opacity ,delay:delay},time,function(data){
            if(callback != null){
                callback(data);
            }
        });
    }
}