淡出一个元素的焦点和模糊

Fading an element onfocus and onblur

本文关键字：焦点 模糊 元素 一个 淡出      更新时间：2023-09-26

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

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

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

this.si = setInterval();

但是像这样清除间隔:

clearInterval(this.elem.si)

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

另外，您如何调用fadeEffect ?你使用new fadeEffect()吗?当您调用方法时，您确定this被正确处理了吗?

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

相关文章：