Question

我在页面上有一个单词计数器，用于计算每个输入元素的字符数。

当聚焦输入元素时，触发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
        }
    }
}
}();

Answer 1

也许是因为你没有正确地做clearInterval()。您正在设置这样的间隔：

this.si = setInterval();

但清除这样的间隔：

clearInterval(this.elem.si)

它们不应该this.si或两者都是this.elem.si吗？

另外，你是如何调用fadeEffect的？你在使用new fadeEffect()吗？您确定在调用方法时正确处理this吗？

Answer 2

使用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/

褪色元素onfocus和onblur

2 个答案: