Jquery AJAX Effects

Question

I am trying to load page with ajax and its working fine without issue but I want to add fadeIn fadeOut effect and loader gif animation.

Can anyone please help me to do that. I am using below code.

$(document).ready(function(){
    // load index page when the page loads
    $("#main").load("content.php");

    $("#home").click(function(){
    // load home page on click
        $("#main").load("content.php");
    });
    $("#mediakit").click(function(){
    // load about page on click
        $("#main").load("mm-media-kit.php");
    });
});

I am not experienced with jquery.

Answer 1

You can use http://api.jquery.com/ajaxStart/ and http://api.jquery.com/ajaxStop/ to show and hide a loading image in this case. Like this

I am assuming you have a loading image div with id loading somewhere in your page which is initially hidden. Then you can show loading image using this two function above like this

//show the loader at the start of ajax request
$("#loading").ajaxStart(function(){
   $(this).show();
 });
//hide the loader when ajax request Completes
$("#loading").ajaxComplete(function(){
   $(this).hide();
 });