исчезают проблемы с функцией

Question

Я сделал скрипт, который затухает при наведении курсора на кнопку, а при ее исчезновении. Он отлично работает на событии mouseover, но не работает на mouseout, есть идеи?

P.S. Я не использую jquery, потому что я пытаюсь изучить это в образовательных целях.

Зайдите сюда, чтобы увидеть код: http://jsfiddle.net/assuredlonewolf/t2sYX/ Не стесняйтесь редактировать это!

Answer 1

У вас есть две проблемы:

• Интервал создается несколько раз и нигде не очищается
• Вы используете < 1.1, чтобы определить, должен ли элемент стать видимымили нет, пока счет fade начинается с 1.1.Очевидно, что 1.1 никогда не ниже 1.1.

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

var interval; // Declare a variable to hold the timer OUTSIDE the function, 
              //  so that all event listeners can work with ONE interval
function fade(elem, speed, mode) {
    var count = 0;
    var fade = 1.0;
    clearInterval(interval); // Clear interval, to prevent having multiple
                             //  running intervals
    if (mode === true && count == 0) {
        count = 1;
        interval = setInterval(function() {
            fade = fade - .1;
            if(fade > -.1) document.getElementById(elem).style.opacity = fade;
        }, speed)
    } else {
        count = 0;
        interval = setInterval(function() {
            fade = fade + .1;
            // Updated code below: Replaced < with <=
            if(fade <= 1.1) document.getElementById(elem).style.opacity = fade;
        }, speed)
    }
}

Дополнительные советы:

• Храните document.getElementById(elem) в переменной, вне функции интервала (но внутри function fade, по соображениям производительности. Поиск в вариабельной области дешевле, чем вызов функции.

Answer 2

Для начала вы никогда не остановите свой интервальный таймер. Как только это начинается, это продолжается навсегда. Вам нужно сохранить возвращаемое значение после установки интервала и остановить таймер с помощью clearInterval, когда вы закончите с исчезновением.