Блог

У меня есть довольно простой фрагмент jQuery, который затухает элемент, а затем загружает внешнюю страницу PHP через AJAX после нажатия кнопки, и я пытаюсь сделать то же самое с помощью Javascript, поэтому я могу вообще не использовать jQuery.

jQuery:

 $(document).on("click", "#button", function () {
    $("#image").fadeOut(580, function () {
        $("#image-wrapper").load("loader.php");
     });

    return false;
});
 

Javascript:

 document.getElementById("button").addEventListener("click", function () {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        if (xhr.status >= 200 amp;amp; xhr.status < 300) {
            document.getElementById("image").classList.add("fade--out");
            document.getElementById("image-wrapper").innerHTML = xhr.responseText;
            console.log("Success");
        } else {
            console.log('Error');
        }
    };

    xhr.open('GET', 'loader.php');
    xhr.send();
});
 

И немного CSS:

 .fade--out {
    opacity: 0;
}

#image {
    transition: opacity 480ms ease 0s;
}
 

До сих пор я написал это, но я могу только заставить XMLHttpRequest работать нормально, но, похоже, я не могу заставить image элемент исчезать перед загрузкой файла PHP. Как я могу заставить image div исчезнуть, а затем загрузить файл PHP внутри imaga-wrapper div?

Смотрите Комментарии:

 document.addEventListener("click", function (evt) {
  // Because of event delegation, we need to check to see
  // if the source of the event was the button
  if(evt.target.id === "button"){

    // Add a class to the image that changes the opacity to fully
    // transparent, but because of the default image styling, a 
    // CSS transition will do that over the course of 480 milliseconds.
    document.getElementById("image").classList.add("fade--out");
    
    // Once that is done, call the supplied function
    requestAnimationFrame(function(){
       // AJAX Call here
    });
    
  }
}); 

 .fade--out {
    opacity: 0;
}

#image {
    transition: opacity 480ms ease 0s;
}