淡入淡出元素onblur

我在頁面上有一個單詞計數器，用於統計每個輸入元素的字符數。淡入淡出元素onblur

當一個輸入元素被聚焦時，觸發fadeIn函數淡入計數器元素。當輸入元素失去焦點即模糊時，在計數器上觸發fadeOut功能。

但是，當您使用鼠標或鍵盤快速間隔地聚焦和模糊元素幾次時，漸變效果會越來越少。淡入淡出的計數器最終只在不透明度0和1之間閃爍。需要刷新頁面才能再次實現淡入淡出效果，直到再次鬆開爲止。

如果您選中所有元素並重新獲得瀏覽器地址欄的初始焦點，也會觸發此問題。

爲什麼會發生這種情況？它可能與淡入淡出功能和setInterval有關嗎？

這裏有一個例子淡入淡出功能，我從http://www.scriptiny.com使用：

var fadeEffect=function(){ 
return{ 
    init:function(id, flag, target){ 
     this.elem = document.getElementById(id); 
     clearInterval(this.elem.si); 
     this.target = target ? target : flag ? 100 : 0; 
     this.flag = flag || -1; 
     this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0; 
     this.si = setInterval(function(){fadeEffect.tween()}, 20); 
    }, 
    tween:function(){ 
     if(this.alpha == this.target){ 
      clearInterval(this.elem.si); 
     }else{ 
      var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag); 
      this.elem.style.opacity = value/100; 
      this.elem.style.filter = 'alpha(opacity=' + value + ')'; 
      this.alpha = value 
     } 
    } 
} 
}();

來源

2011-09-12 why

你能爲此使用jQuery？它將高達10個字符串.. – Samich

當然，我可以看到問題是否在jQuery中重演。但我首先提出的原因是爲了更好地理解這種事情發生的原因。 – why

發佈jQuery示例，如果明白你的問題是正確的:) – Samich

也許是因爲你沒有做clearInterval()正常。要設置這樣的時間間隔：

this.si = setInterval();

但清除這樣的時間間隔：

clearInterval(this.elem.si)

難道他們不應該同時爲this.si或者都是this.elem.si？

另外，你是如何調用fadeEffect？你在用new fadeEffect()嗎？當你調用方法時，你確定this正在被正確處理嗎？

來源

2011-09-12 06:54:42 jfriend00

事實證明，需要將時間間隔分配給this.elem.si，這是有問題的實際元素。不要將其變成論壇討論，但是，爲什麼要將元素間隔設置爲不同於將其分配給變量？ – why

只要您讀取和寫入相同的項目，它可能會以任何方式工作。但是，從一個人閱讀並寫到另一個人意味着你永遠不會清除間隔。 – jfriend00

使用jQuery可能是你正在尋找這樣的行爲：

$(document).ready(function() { 
     $('#test').fadeTo('fast', 0.5); // to set default opacity. CSS can be used here 
     $('#test').focus(function() { 
      $(this).fadeTo('fast', 1); 
     }).blur(function() { 
      $(this).fadeTo('fast', 0.5); 
     }); 
    });

這裏就是活生生的例子：http://jsfiddle.net/hrzw7/1/

，如果你有很多這樣的控件，使用.class選擇：http://jsfiddle.net/hrzw7/3/

來源

2011-09-12 07:05:46 Samich

非常感謝你的例子Samich！你從未想過介紹過一些新的想法。 – why

淡入淡出元素onblur

回答

相關問題