Simple AJAX fade effect + Loader + current class

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

What is the "trouble" you're getting with the fade effect? Also, have you looked at this: http://stackoverflow.com/a/2745494/1220302 — anAgent, Jul 13 '12 at 12:02

score 1 · Answer 1 · edited Jan 03 '18 at 18:54

1

Have a look, is it what you are looking for?

$('ul#sidenav li a').click(function(){
    $('#content-div').fadeOut();
    var page = $(this).attr('href');        
    $('#content-div').load('details/'+ page +'.html', function() {
       $('#content-div').fadeIn();
    });
    return false;       
})

edited Jan 03 '18 at 18:54

Milad Rashidi

1,296
4
22
40

answered Jul 13 '12 at 12:05

Leg0

510
9
21

score 1 · Accepted Answer · answered Jul 13 '12 at 12:06

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;       
});

answered Jul 13 '12 at 12:06

Tom Walters

15,366
7
57
74

I have tried this but not working properly. 1.) On click jump back to the top. 2.) flicker on loads. Its showing first than fadeout than fade in same content. 3.) Current class not adding or remove at all. Any idea? – Code Lover Jul 13 '12 at 12:12
Not actually let me place code somewhere so you can see that.. However your code is working in most area but not completely what I am looking for. Also current class now applying when click but its not removing the class.. Let me place code somewhere – Code Lover Jul 13 '12 at 12:23
please check this code http://jsfiddle.net/C4EpB/ I have worked bit on it, this is for your information during the time and change menu (ul) id to `side-nav` – Code Lover Jul 13 '12 at 12:28

Simple AJAX fade effect + Loader + current class

2 Answers2