同時執行透明度和寬度改變的問題
window.onload=function(){
? ? var li=document.getElementsByTagName("li");
? ? for (var i = li.length - 1; i >= 0; i--) {
? ? li[i].timer=null;
? ? ? ? li[i].alpha=100;
? ? li[i].onmouseover=function(){
? ? startMove(this,400);
? ? startopacity(this,30);
? ? }
? ? li[i].onmouseout=function(){
? ? startMove(this,200);
? ? startopacity(this,100);
? ? }
? ? };
}
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
? ? ? ? ?var speed=(iTarget-obj.offsetWidth)/8;
? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? ?if(obj.offsetWidth==iTarget){
? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ?}else{
? ? ? ? ?obj.style.width=obj.offsetWidth+speed+'px';
? ? ?}
},30)
}
function startopacity(obj,iTarget){
var speed=0;
? ? clearInterval(obj.timer);
? ? obj.timer=setInterval(function(){
? ? ? ? if(obj.alpha>iTarget){
? ? ? ? speed=-10;
? ? ? ? }else{
? ? ? ? speed=10;
? ? ? ? }
? ? ? ? if(obj.alpha==iTarget){
? ? ? ? clearInterval(obj.timer);
? ? ? ? }else{
? ? ? ? ? ? obj.alpha+=speed;
? ? ? ? obj.style.opacity=obj.alpha/100;
? ? ? ? }
? ? },30) ??
}
上面是我的js代碼,這樣執行的話只執行透明度的變化,然而把最后一個方法的代碼刪除就能執行寬度的變化,怎么樣才能同時執行兩個變化
2015-10-15
你兩個方法用的是同一個定時器相互爭搶干擾縮寫為一個方法, 同時注意if語句的判別 這個判斷有些不好處理。可以設置執行的次數。當次數達到以后全部清空定時器。
2015-09-09
放在同一個方法里,同一個定時器試下