js 实现 css 动画 shake and fandeOut

// e: 元素对象 或者 id

//动画结束 回调函数

//e震动距离

// 震动时间

 function shake (e, oncomplete, distance, time) {

　　if (typeof e == 'string') {

　　　　e = document.getElementById(e);

　　}　

　　if (!time) time = 500;

　　if(!distance) distance = 5;

　　var originalStyle = e.style.cssText;

　　e.style.position = 'relative';

　　var start = (new Date()).getTime();

　　animate();

 

　　//检查消耗时间，更新E 位置、

　　//如果完成 就欢迎位置

　　function animate() {

　　　　var now = (new Date()).getTime();

　　　　var elapsed = now - start;

　　　　var fraction = elapsed/time;

　　　　if (fraction < 1) {//动画未 完成

　　　　　　//使用正弦函数将完成比例 乘以4pi

　　　　　　//所以 来回往复两次

　　　　　　var x = distance * Math.sin(fraction*4*Math.PI);

　　　　　　e.style.left = x + 'px';

　　　　　　//在25 毫秒后 或总时间最后 再次运行函数

　　　　　　// 产生每秒40 帧的动画

　　　　　　setTimeout(animate, Math.min(25, time-elapsed));

　　　　} else {

　　　　　　e.style.cssText = originalStyle;

　　　　　　if (oncomplete ) {oncomplete(e);}

　　　　}

　　}

}

/*-------------------------------------------------------------------------------*/

// 以毫秒的时间将E 从完全不透明 淡出 到完全透明

 

function fadeOut(e, oncomplete, time){

　　if (typeof e == 'string')  e = document.getElementById(e);

　　if (!time) time = 500;

　　// 使用Math.sqrt 作为一个简单 缓动函数

　　//精巧的非线性： 一开始淡出的比较快， 然后缓慢一些

　　var ease = Math.sqrt;

　　var start = (new Date()).getTime();

　　animate();

 

　　function animate() {

　　　　var elapsed = (new Date()).getTime() - start;//消耗时间

　　　　var fraction = elapsed/time; //总时间的 几分之几

　　　　if (fraction < 1) {// 如果动画未完成

　　　　　　var opaction = 1 - ease(fraction);//计算元素不透明度

　　　　　　e.style.opacity = String(opacity);

　　　　　　setTimeout(animate, Math.min(25, time-elapsed));

　　　　} else {

　　　　　　e.style.opacity = '0';

　　　　　　if (oncomplete) { oncomplete(e); }

　　　　}

 

　　}

}

 

/*-------html-------------------------------*/

<button onclick="shake(this, fadeOout);"> shake and Fade </button>

 

/*----------css3 实现--------------------*/

.fadeable {transiton: opacity 0.5s ease-in}