Почему стиль моего узла только уменьшается, а не увеличивается?

Question

Я работаю над веб-сайтом, и я пытаюсь программно затушевывать объекты.
Однако, когда я запускаю свой цикл, он только вычитает непрозрачность из объекта, когда я пытаюсь добавить к непрозрачности, он просто остается равным 0,01 для всех 100 циклов, но когда он запускается 100-199, он вычитает 0,01 каждый раз.
Я запутался, почему он делает такие ...

function searched() {
    var count = 0;
    if (srched) {
        return
    } else {

        let runloop = setInterval(function () {
            if (count <= 99) {
                document.getElementById("done").style.opacity += 0.01;
            } else if (count > 99 && count <= 199) {
                document.getElementById("done").style.opacity -= 0.01;
            } else {
                clearInterval(this)
                srched = false;
            }
            count += 1;
        }, 40)

    }

}

HTML-код:

<p id = "done" style="opacity: 0; color: #1a5b02;">

Там нет проблем с циклом, просто добавив к непрозрачности.

javascript html css

0

Chris Hutchison 24 Апр 2017 в 09:17

Answer 1

Проблема в том, что += также может означать конкатенацию, поэтому свойство opacity получает значение '0' + '0.01' = '00.01' для значения в первый раз в цикле, которое исправляется до 0,01, но затем вы получаете {{X2 }} в следующей итерации, что является ошибкой.

-= не имеет проблемы - это не может быть строковой операцией, поэтому он просто выполняет вычитание.

Решение: убедитесь, что не сделали конкатенацию по ошибке. Я думаю, что самое короткое решение - написать ...opacity -= -0.01;, но мне любопытно, есть ли более короткие;)

1

Mr Lister 24 Апр 2017 в 06:29

Answer 2

Вам нужно использовать Number(), чтобы добавить / вычесть непрозрачность, иначе это будет выглядеть как строка и, следовательно, ваш эффект не работает

var srched=false;
function searched() {
    var count = 0,done=document.getElementById("done");
    if (srched) {
        return
    } else {

        let runloop = setInterval(function () {
            if (count <= 99) {
                done.style.opacity = Number(done.style.opacity)+0.01;
            } else if (count > 99 && count <= 199) {
                done.style.opacity = Number(done.style.opacity)-0.01;
            } else {
                clearInterval(this)
                srched = false;
            }
            count += 1;
        }, 40)

    }

}
searched();

<p id="done">Lorem ipsum doner inut</p>

0

Rohan Kumar 24 Апр 2017 в 06:33

Почему стиль моего узла только уменьшается, а не увеличивается?

2 ответа

Похожие вопросы

Новые вопросы

javascript