Question

In my code I have a jquery tab and when clicked a tab I am printing the text “Loading”.
However since the tabs are changing too fast I couldnt see the text. How can I make a delay of 1 or 2 seconds when switching bettween tabs? thanks.

My codes are below.

<div class="loading"><p>Loading...</p></div>

$(function() {
    $(".nav-content").tabs(
        {
        // CSS classes                      
        selectedClass: 'current',
        spinner: '',
        select: function(ui) {

           $(".loading").show();                

        },
        show: function(ui) {

            $(".loading").hide();

        }
    }
);

});

Answer 1

You can delay it with .delay() but this seems somewhat backwards. I know everything must be AJAX these days, but do we really need artificial loading time? I think if your site is ready to render the UI faster than the Loading… message, then let it. Makes for a better user experience, even if it doesn’t seem as complicated