我在页面上有一个单词计数器,它计算每个输入元素的字符数。
当输入元素被聚焦时,fadeIn
函数被触发以淡入计数器元素,当输入元素失去焦点,即模糊时,fadeOut
函数被触发在计数器上。
然而,当你用鼠标或键盘多次聚焦和模糊元素时,淡出效果会越来越少。淡入淡出的计数器最终只在不透明度之间 Flink :0和1。需要一次页面刷新才能再次实现淡入淡出效果,直到它再次搞砸为止。
如果用Tab键切换所有元素并重新获得浏览器地址栏上的初始焦点,也会触发此问题。
为什么会出现这种情况?会不会和fade函数以及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
}
}
}
}();
2条答案
按热度按时间gfttwv5a1#
也许是因为您没有正确地执行
clearInterval()
,您将间隔设置为:但要像这样清除间隔:
它们不都应该是
this.si
还是this.elem.si
?另外,您是如何调用
fadeEffect
的?您使用的是new fadeEffect()
吗?您确定在调用方法时this
得到了正确的处理吗?stszievb2#
使用jquery时,您可能正在寻找这样的行为:
下面是一个示例:http://jsfiddle.net/hrzw7/1/
如果你有很多这样的控件,使用
.class
选择器:http://jsfiddle.net/hrzw7/3/