Javascript - возникли проблемы с функцией, которую я написал для выцветания изображений в - PullRequest
Новая
       29

Javascript - возникли проблемы с функцией, которую я написал для выцветания изображений в

1 голос
/ 23 ноября 2010

Итак, я написал функцию, цель которой состоит в том, чтобы уменьшить изображение с 0 непрозрачности до 1. Он предназначен для увеличения непрозрачности на 0,1 каждые 100 мс, в общей сложности на 1 с.Функция будет вызываться, и это увеличит непрозрачность, но, кажется, она просто ждет 100 мс и сразу устанавливает непрозрачность на 1.Есть идеи, где я иду не так?Вот фрагменты кода, относящиеся к функции и изображениям, которые должны быть затенены. Я ценю любой ввод =)

Javascript: 

function setOpacity(id, num) {
    document.getElementById(id).style.opacity = num;
}

function imagePopUp(id){
    var step = 0.0;

    for(var i = 1; i <= 10; i++){
        step = i / 10;
        var num = step.toFixed(1);
        setTimeout(function(){setOpacity(id, num);}, 100);

    }
}

HTML: 

<div id ="shadowWrapper">
    <div id ="imageContainer">
         <img class ="sideImages" src ="images/mini_race1.jpg" onclick ="imagePopUp('image1')"></img>
         <img class ="sideImages" src ="images/mini_race2.jpg" onclick ="imagePopUp('image2')"></img>
         <img class ="sideImages" src ="images/mini_race3.jpg" onclick ="imagePopUp('image3')"></img>
    </div>

          <img class ="hiddenImages" id ="image1" src ="images/race_around_ireland_01.jpg"></img>
          <img class ="hiddenImages" id ="image2" src ="images/race_around_ireland_02.jpg"></img>
          <img class ="hiddenImages" id ="image3" src ="images/race_around_ireland_03.jpg"></img>    
</div>

CSS: 

#imageContainer {
    position: absolute;
    margin-top: 10px;
    width: 200px;
    height: 450px;
    left: 600px;
}

.sideImages {
    display: block;
    width: 150px;
    height: 112px;
    border: 1px #94b62d solid;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.hiddenImages {
    display: block;
    position: absolute;
    border: 1px black solid;
    left: 100px;
    opacity: 0.0;
}

1 Ответ

3 голосов
/ 23 ноября 2010

Вы ставите все обратные вызовы в очередь на выполнение через 100 мс.setInterval не выполняет функции стека или очереди.

Кроме того, та же самая переменная num захватывается в замыканиях, которые вы создаете, и будет иметь свое окончательное значение при выполнении в каждомобратный вызов.

Исправление для обеих проблем было бы заменить 

setTimeout(function(){setOpacity(id, num);}, 100);

на 

setTimeout(function(inum) {
    return function(){setOpacity(id, inum);};
}(num), i * 100);
...