очередность JS Opacity

Question

По клику на кнопку, должна меняться прозрачность div с "ТЕКСТ1", потом должен плавно появлятся "ТЕКСТ2" в этом блоке.

По факту, в блоке "ТЕКСТ1", жму на кнопку он растворяется, потом снова плавно появляется "ТЕКСТ1" и резко сменяется на "ТЕКСТ2"

    function news() {
    document.getElementById("container").style.opacity = 0;
    setTimeout (speak,300)
}

    function speak() {  
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("speaker").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","speaker.php",true);
        xmlhttp.send();
        document.getElementById("container").style.opacity = 1;
    }

score 1 · Accepted Answer · answered Jan 07 '20 at 16:45

Кажется, Вы меняете текст в обработчике! А стиль элемента меняете сразу после отправки запроса. В таком случае:

сперва вешается обработчик,
потом улетает запрос,
потом меняется Opacity = 1
срабатывает onreadystatechange
меняется текст.

Попробуйте менять opacity в обработчике сразу после строки:

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("speaker").innerHTML = this.responseText;
    document.getElementById("container").style.opacity = 1;
  }
};

очередность JS Opacity

1 Answers1