jquery .show() and .hide() not working in safari - adding spinner to <a

Question

I have some very basic code that acts as a loading gif for a webpage:

The loading and content containers sit in my base template. The

---

//header         


        

Answer 1

It appears that you function is named spinner, yet you're attempting to fire loading() inside your a tag (onclick="javascript:loading();). Changing your function name to loading should fix it.

Here's a working example:

https://jsfiddle.net/nvzge1e8/5/

Edit for updated question:

You need to prevent the event, if you stick event.preventDefault() at the top of your function, it should play the animation. Do note, doing this will prevent your link from actually sending your user to the page, so you may need to add a timed redirect to whatever page you're sending them to.

Example code:

 $(function() {
 $(".spin_click").click(function(event) {
     event.preventDefault()
     $("#logo_spinner").attr("src", "/static/images/loaders/spinner.gif");
     $('.content').addClass('hide');
     setTimeout(function() {
         window.location.href = "/wait";
     }, 4000);

 });
});