Why do I see gif in Firefox but not in Chrome?

Question

I would like to see the animated gif when I click the button in Chrome as I do in Firefox.

I have tried timeouts but to no avail. This seems so basic. However I am stumped.

Does anyone know how I may achieve this?

$(document).on('click',".opener",function(event){
    $(".ajaxSpinnerImage").show();
    $("button").hide();
    alert("In FF I will now see the gif. In Chrome I won't.");
    $("body").html("Done!");
});

.ajaxSpinnerImage{
    display:none;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="//code.jquery.com/ui/1.11.1/themes/blitzer/jquery-ui.css" rel="stylesheet"/>
<button class="opener">Click me to see animated gif</button>
<img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" class="ajaxSpinnerImage" title="Please wait...">