непрозрачность увядает работает только в режиме отладки

Question

Я пытаюсь добавить замирание между двумя изображениями с помощью JavaScript:

function swap(test){ 

    if(test==2){ 

    document.getElementById("top").innerHTML = "<img src=\"_images/"+showList[showIndex][3]+".jpg\" width=\"400\" />"; // Sets top invisible div to old picture 

    showIndex++; 

    var elem = document.getElementById("top"); 
    elem.style.transition = ""; 
    elem.style.opacity =1; // makes old picture visible 

     document.getElementById("bottom").innerHTML = "<img src=\"_images/"+showList[showIndex][3]+".jpg\" width=\"400\" />"; 
    } // Set's bottom div to New picture 

    var elem = document.getElementById("top"); 
    elem.style.transition = "opacity 0.5s linear 0s"; 
    elem.style.opacity = 0; // fades out top picture to reveal new bottom pic. 
} 

В принципе, у меня есть 2 див, верх и низ. при загрузке я устанавливаю вершину в 0 непрозрачность. (настройка этого сценария).

Когда я написал код, он не исчез, он просто появился на место .... пока я не поставил предупреждение прямо перед строкой var elem = document.getElementById("top");, тогда он работал отлично, поэтому я запустил его в debug (console ?), и он отлично работает, если я пройду через него по одной линии за раз.

Кто-нибудь знает, почему это произойдет? Мне нужна какая-то задержка, чтобы переход произошел?

Answer 1

использование setTimeout как этот

function swap(test){ 

    if(test==2){ 

    document.getElementById("top").innerHTML = "<img src=\"_images/"+showList[showIndex][3]+".jpg\" width=\"400\" />"; // Sets top invisible div to old picture 

    showIndex++; 

    var elem = document.getElementById("top"); 
    elem.style.transition = ""; 
    elem.style.opacity =1; // makes old picture visible 

     document.getElementById("bottom").innerHTML = "<img src=\"_images/"+showList[showIndex][3]+".jpg\" width=\"400\" />"; 
    } // Set's bottom div to New picture 
setTimeout(function(){ 
    var elem = document.getElementById("top"); 
    elem.style.transition = "opacity 0.5s linear 0s"; 
    elem.style.opacity = 0; // fades out top picture to reveal new bottom pic. 
    }, 5000);//here time interval is 5 seconds 
}