Элемент Fade HTML с необработанным javascript

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

Мне удалось собрать функцию для "исчезновения" элемента, и она работает просто отлично, моя проблема в том, что когда я пытаюсь обратить ее, элемент "исчезает", он не исчезает. Работа. Я пытался изменить очевидное, но не могу понять, что я делаю не так.

Мой код пока выглядит следующим образом:

Учитывая, что у меня есть "div", например:

<div id="test" style="width:200px; height:200px; display:block; opacity:1; background-color:red;"></div>

Функция JavaScript, которую я использую для его исчезновения:

var getElement = document.getElementById('test');
function fadeOut(elem, speed){
if(!elem.style.opacity){
    elem.style.opacity = 1;
}
var desvanecer = setInterval(function(){
    elem.style.opacity -= .02;
    if(elem.style.opacity < 0){
        clearInterval(desvanecer);
    }
}, speed / 50);
}
fadeOut(getElement, 500);

Может ли кто-нибудь взглянуть на это и сообщить мне, что я делаю неправильно, все, что я хочу сделать, это «ИСЧЕЗНЕНИЕ» элемента с непрозрачностью, равной «1».

Кстати, я не умею пользоваться jQuery, но очень хочу научиться этому.

Спасибо

Моя попытка отменить функцию выглядит следующим образом:

var getElement = document.getElementById('test');
function fadeIn(elem, speed){
if(elem.style.opacity){
    elem.style.opacity = 0;
}
var desvanecer = setInterval(function(){
    elem.style.opacity += .02;
    if(elem.style.opacity > 1){
        clearInterval(desvanecer);
    }
}, speed / 50); 
}
fadeIn(getElement, 500);

javascript setinterval fade
person jnkrois    schedule 23.04.2010    source источник
comment
Это не будет работать ни в одной версии IE.   -  person SLaks    schedule 23.04.2010
comment
Можете ли вы показать нам свой код постепенного in?   -  person SLaks    schedule 23.04.2010
comment
Я добавлю свой код fadeIn вверху   -  person jnkrois    schedule 23.04.2010

Ответы (1)


arrow_upward
6
arrow_downward

setInterval работает в глобальной области видимости, поэтому вам нужно определить таймер относительно окна.

Вы не можете объединить строковое значение, возвращаемое из свойства стиля, и ожидать число — вы получите «0.02.02.02.02».

Выведите число из строки, затем добавьте .02.

Это будет работать в некоторых браузерах, но IE до 9 требует другого выражения для установки и чтения непрозрачности.

function fadeIn(elem, speed){
    if(elem.style){
        elem.style.opacity= '0';
    }
    window.fadetimer= setInterval(function(){
        elem.style.opacity= +(elem.style.opacity)+.02;
        if(elem.style.opacity> 1){
            clearInterval(fadetimer);
        }
    },
    speed);
}
person kennebec    schedule 23.04.2010
comment
Спасибо большое, уже 2 дня мучаюсь. Это не только работает, но объяснение помогло мне понять, что происходит. Большое спасибо - person jnkrois; 23.04.2010