基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 ----[修正版]
最近手上的没什么具体的事,把以前写的效果翻了出来发现有些地方不太理想然后修正了下做了个新版的代码如下:
(新版的优化了下以前的运动单一效果,新增了多属性同时修改方法,如果需要队列实现效果的话只需要在回调函数里面在新增此方法即可,以及在函数内部实例化避免多次外部实例)
PS:其实东西的核心没什么太大变化,只是在原本上做了少许的扩充,顺带记录下在做个东西的过程中对于opacity碰到了一些小问题,ie下如果未定义opacity那在获取时会为undefined的,这个比较无语。所以在做透明效果的时候一定要注意了
<!DOCTYPE HTML><html><head><meta charset="gbk"><title>test</title><style>div,h6,body{padding:0;margin:0;}div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;}.car-mod{position:relative;width:200px;}.car-menu{width:200px;background:#c06;cursor:pointer;color:#fff;}.car-box{border:2px solid #c06;width:0;overflow:hidden;filter:alpha(opacity=0);opacity:0;display:none}.car-box h6{background-color:#f5f5f5;background-image:-moz-linear-gradient(#f5f5f5,#fff);}.things{border-top:1px solid #ccc;padding:50px 15px;}</style></head><body><div class="car-mod" id="J_car_mod"> <div class="car-menu">购物车</div> <div class="car-box" id="J_car_box"> <h6>我的购物车</h6> <div class="things"></div> </div></div><script src="animation.source.js"></script><script>(function(){//线上调用这个插件的时候直接调用animation.js这个是压缩了的var D = document,carMod = D.getElementById("J_car_mod"),carBox = D.getElementById("J_car_box"),carControl=true;//移入显示carMod.onmouseover = function(even){var even = even || window.event,target = even.target || even.srcElement;if(target.className=="car-menu"){!!carControl&&(ani(carBox,{styJson:{height:200,opacity:100}},function(){carControl=false;ani(carBox,{styJson:{width:300}})}));}//移出隐藏this.onmouseout = function(even){var e = even || window.event,reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;while (reltg && reltg != this){reltg = reltg.parentNode;} if(reltg != this){!carControl&&(ani(carBox,{styJson:{width:0}},function(){carControl=true;ani(carBox,{styJson:{height:0,opacity:0}})}));}}}})()</script></body></html>