Уровень анимации в Javascript: для начинающих

Question

Я пытаюсь выучить анимацию Javascript, но, как я думал, она не работает xD.

ОБНОВЛЕНО УДАЛЕНИЕ ОШИБОК ВСТАВКИ

Я пытался

function click_home()
{
    for(i=0;i<=10;i++)
    {
       setTimeout(setOpacity("div_home",i),200);
    }
};

function setOpacity(id,value) {
    document.getElementById(id).style.opacity = value/10;
    document.getElementById(id).style.filter = 'alpha(opacity=' + value*10 + ')';
};

И HTML:

<td id="button_home" onclick="click_home();"> Home </td>

Но, очевидно, это неправильно.Что я могу сделать, чтобы сделать это? :) Спасибо всем ответам:)

Answer 1

Во-первых, у вас есть синтаксическая ошибка в цикле for (измените , на ;).

Вам нужно передать функцию в setTimeout, так чтоможет выполнять его периодически.То, что вы в настоящее время передаете setTimeout, является результатом выполнения setOpacity("div_home",i) (то есть undefined).

function click_home()
{
    for(i=0;i<=10;i++)
    {
       setTimeout(function () {
           setOpacity("div_home",i)
       }, 200);
    }
};

То, что вы также найдете, это ваша ценность i всегда будет последним значением из-за области действия i, чтобы исправить это, вам нужно добавить новый уровень области действия.Для более подробного описания этой проблемы см. Как ссылаться на правильное значение `i` в обратном вызове в цикле?

function click_home()
{
    function delay(i) {
        setTimeout(function () {
           setOpacity("div_home",i)
        }, 200);
    }

    for(i=0;i<=10;i++)
    {
       delay(i);
    }
};

Как отмечено в комментариях, вы найдете все ваших тайм-аутов будут выполнены через 200 мс .. чтобы получить анимацию, вам нужно помешать выполнению.Самый простой способ - добавить i к расчету задержки;то есть 25 * i.

Я не уверен почему вы устанавливаете opacity и filter на 0 сначала в вашем setOpacity функция;эти сбросы немедленно будут установлены на следующие значения.

Вы также должны посмотреть на кэширование результата document.getElementById(id).style, так как вы просматриваете его 4 раза (и будет2, если вы удалите ненужные сбросы, описанные выше).

function setOpacity(id,value) {
    var style = document.getElementById(id).style;

    style.opacity = value/10;
    style.filter = 'alpha(opacity=' + value*10 + ')';
};