Почему не работает этот код (анимация на javascript)?

Question

[Алексей Дзюба]

Есть код:

Код

var div = document.querySelector('.test');

	function show(elem, t) {
        elem.style.display = "block";
        elem.style.opacity = 0;
        var fadeEffect = setInterval(function () {
            if (elem.style.opacity > 1) {
                clearInterval(fadeEffect);
            }

            elem.style.opacity += 0.02; //0.02
        }, t)
    }

    div.onclick = function () {
        show(this, 19);
    }

Ссылка на jsfiddle.
Не могу понять никак. Хочу сделать так, чтобы при клике элемент получал опасити 0, и постепенно возвращался до состояния опасити 1, то есть типа анимации чтоб было. Вроде все стили проставил в функции, но срабатывает только часть, которая дает опасити 0.02, а сетИнтервал крутится бесконечно.
В чем здесь проблема?

Answer 1

[0xD34F]

elem.style.opacity += 0.02;

Тип значения - строка. Поэтому += тут делать нельзя. Можно так:

elem.style.opacity = (+elem.style.opacity + 0.02).toFixed(2);

Comments

[Алексей Дзюба]

Хм, странно. Такой код (функция hide() для скрытия элемента) работает и так без приведения к числу (только там -= вместо += - jsfiddle. Все равно СПАСИБО огромное!!) Только все равно не понятно...

[0xD34F]

Алексей Дзюба, да всё понятно. Когда вы выполняете +=, сначала там 0, первый раз добавляете 0.02, получаете 00.02, что приводится к 0.02, второй раз пытаетесь увеличить значение, получаете 0.020.02, что опять-таки приводится к 0.02, и так далее - отсюда и неизменность значения.

А вот -=, тут ситуация другая. В отличие от сложения, при вычитании строки автоматически преобразуются в числа - так что всё работает нормально.

[Алексей Дзюба]

0xD34F, охренеть
СПАСИБО огромное ЕЩЕ РАЗ!!!!