Выцветание элемента onfocus и onblur

Question

У меня есть счетчик одного слова на странице, который подсчитывает количество символов для каждого элемента ввода.

Когда элемент ввода находится в фокусе, функция fadeIn запускается, чтобы исчезнуть в элементе счетчика.Когда элемент ввода теряет фокус, то есть размыт, на счетчике запускается функция fadeOut.

Однако, когда вы фокусируете и размываете элементы несколько раз и с короткими интервалами с помощью мыши или клавиатуры, эффект затуханиязамечено все меньше и меньше.Счетчик, который затухает и исчезает, в конце мигает только между непрозрачностью: 0 и 1. Для достижения эффекта затухания требуется обновление страницы до тех пор, пока он снова не облажается.

Эта проблема также возникает, если вы вкладываетечерез все элементы и восстановить первоначальный фокус в адресной строке браузера.

Почему это происходит?Может ли это быть как-то связано с функцией 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
        }
    }
}
}();

Answer 1

Используя 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/

Answer 2

Возможно, это потому, что вы не делаете clearInterval() правильно. Вы устанавливаете интервал следующим образом:

this.si = setInterval();

но очистка интервала примерно так:

clearInterval(this.elem.si)

Разве они не должны быть this.si или оба this.elem.si?

Кроме того, как вы вызываете fadeEffect? Вы используете new fadeEffect()? Вы уверены, что this обрабатывается правильно, когда вы вызываете методы?