Question

I have the following Jquery which, on clicking on a Checkbox, re-loads a DIV passing the value of the box and showing new items based on a query.

I would like to have a “Loading” bar for 3 seconds or so… before loading the content of the DIV, fading out after. And then load the DIV with a fade-in effect. I tried a few things but did’t work.

Here is my code.

Thanks!

jQuery(document).ready(function($) {
    $("input:checkbox").change(function() {
        if ($(this).is(':checked')) 
        {
            $(".loadingItems").delay(3000).fadeOut(3000);
            var color = [];
            color.push($(this).val());
            $(".indexMain").load('indexMain.php?color='+color);
        }
        else if ($(this).not(':checked')) 
        {
            $(".indexMain").load('indexMain.php');
        }
    });
});

Answer 1

It’s normally considered bad practice to have your users wait for three seconds just so you can show off your loading bar, and by the time it’s faded out, six seconds have passed and your users have left. Remove the loading bar after the ajax call is finished and the content is ready. Also, are you sure you should be using an array in a querystring ?

$(function() {
    $("input:checkbox").on('change', function() {
        $(".loadingItems").fadeIn(300); //fade in on change
        if (this.checked) {
            var color = [];
            color.push(this.value); //array in querystring ?
            $(".indexMain").load('indexMain.php?color='+color, function() {
                $(".loadingItems").fadeOut(300); //remove when load is complete
            });
        }else{
            $(".indexMain").load('indexMain.php', function() {
                $(".loadingItems").fadeOut(300);  //remove when load is complete
            });
        }
    });
});

I’ll take a wild guess and say this is what you’re after :

$(function() {
    $("input:checkbox").on('change', function() {
        $(".loadingItems").fadeIn(300); //fade in on change
        var qs = this.checked ? 'color='+this.value : '';
        $(".indexMain").load('indexMain.php'+qs, function() {
            $(".loadingItems").fadeOut(300); //remove when load is complete
        });
    });
});​