Question

Hello I am trying to add ajax function to my site and it is working fine with this code. Only now I am getting trouble to get fadeIn and fadeOut effect and loading animation.

This is my script code written in jQuery:

$(document).ready(function() {

    // initial page load
    $('#content-div').load('details/default.html'); 

    // handle menu click
    $('ul#sidenav li a').click(function(){

        var page = $(this).attr('href');        
        $('#content-div').load('details/'+ page +'.html');  
        return false;       
    })

});

And here is html markup:

<ul class="square sidebar-list" id="sidenav">
    <li><a href="default">Description</a></li>
    <li><a href="greenhill" class="current">greenhill</a></li>
    <li><a href="introduction">Introduction</a></li>
</ul>
<div id="content-div">                  
    <div id="loading">Loading...</div>
</div>

Also want to change class for current selected list item in sidenav

Answer 1

Update your code to:

// handle menu click 
$('ul#sidenav li a').click(function(){
    var page = $(this).attr('href');   
    $(this).removeClass('current');

    $('#content-div').fadeOut(200).load('details/'+ page +'.html', function(){
        $(this).fadeIn(200);
        $('#sidenav a[href='+page+']').addClass('current');
    });  

    return false;       
});