очередность JS Opacity [дубликат]

08 февраля 2022, 08:40

На этот вопрос уже даны ответы здесь:

Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания (3 ответа)

Закрыт 2 года назад.

По клику на кнопку, должна меняться прозрачность 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;
    }

Answer 1

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

сперва вешается обработчик,
потом улетает запрос,
потом меняется 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;
  }
};