用效果库后,element.style 的 透明度 opacity, 尺寸 width,height 甚至位置 left,top都发生了改变。
直到 element的大小改变为 0或者opactiy为0的时候他才会消失 display="none"
那么,当下次再让他出现的时候,怎么恢复他的原始信息呢。比如 width.height,opacity等。
在上面的代码中 我们用 effect.setting 保存效果发生前的所有element信息.
注意以上三个自定义函数 onStart,onUpdate,onComplete 他们都是通过 options传进来的调用者自定义函数。
分别在效果发生以前,效果发生时,效果发生完毕后执行。传入的参数可以查阅effect的所有对象。
看到这里,细心的看官可能注意到,这个效果库实际上什么效果都没有做,他只是搭了一个空架子。
Effect.Init 给我们留了一个空接口供 setup方法调用,Effect.Fn也是一个空接口供loop方法调用。
下面我们要做的是扩展 Effect.Init和 Effect.Fn 来充实效果库。
先来一个大家最熟悉的 淡入淡出
Effect.Init 里面的所有成员函数都会被 effect.setup 执行, 这个执行动作在效果开始之前,因此这里
适合做一些初始化的动作。 比如把一些初始信息保存到 effect.setting里面供以后使用。
Effect.Fn 里面的所有成员函数都会被 effect.loop 执行, 这个执行动作在效果运行中,因此这里
就要放核心效果代码,比如计算,改变效果增量等等。
if (effect.options.opacity===undefined) return;
effect.setting.opacity=Opacity(effect.element);
}
Effect.Fn.opacity=function(effect,pos){
if (effect.options.opacity===undefined) return;
Opacity(effect.element,effect.setting.opacity+(effect.options.opacity-effect.setting.opacity)*pos);
}
下面贴出可调试代码(空效果库和淡入浅出插件):(可以拷贝到一个html运行,测试)
