Я пытаюсь написать некоторые JS, реплицирующие функции jQuery fadeIn и fadeOut. Вот код, который у меня есть:

function fadeIn(elem, d, callback)
{

    var duration = d || 1000;
    var steps = Math.floor(duration / 50);
    setOpacity(elem,0);
    elem.style.display = '';
    for (var i = 1; i <= steps; i++)
    {
        console.log(i/steps + ', ' + (i/steps) * duration);
        setTimeout('setOpacity("elem", '+(i / steps)+' )', (i/steps) * duration);
    }
    if (callback)
        setTimeout(callback,d);
}
function setOpacity(elem, level)
{
    console.log(elem);
    return;
    elem.style.opacity = level;
    elem.style.MozOpacity = level;
    elem.style.KhtmlOpacity = level;
    elem.style.filter = "alpha(opacity=" + (level * 100) + ");";
}

У меня проблемы с первым вызовом setTimeout - мне нужно передать объект 'elem' (который является элементом DOM) в функцию setOpacity. Передача переменной 'level' работает просто отлично ... однако я получаю сообщение об ошибке "elem is notfined". Я думаю, это потому, что к тому времени, когда на самом деле выполняются любые вызовы setOpacity, начальная функция fadeIn уже завершена, и поэтому переменная elem больше не существует.

Чтобы смягчить это, я попробовал другой подход:

setTimeout(function() { setOpacity(elem, (i / steps));}, (i/steps) * duration);

Проблема в том, что при вызове функции (i / steps) теперь всегда 1,05 вместо увеличения от 0 до 1.

Как я могу передать рассматриваемый объект в setOpacity, одновременно увеличив уровень прозрачности?