That is because the DOM manipulations are usually a bit heavy and are rendered after all the statements in the mentioned event loop are executed.

As @Pointy rightly mentioned, the layout is rendered only after the registered statements are executed.

It is executed after hide(). hide() registers DOM changes which will be executed after your commands are finished. You can wait for a little before you alert:

$(document).ready(function(){
    $("button").click(function(){
         $("p").hide();
         setTimeout(function() {
             alert("The paragraph is now hidden"); 
         }, 100);
    });
});