Shorthand For .load() Ajax Links With Loader

here's the structure of the code: http://jsfiddle.net/ss1ef7sq/ although it's not really working at js fiddle but the code itself is working as i've tested it locally through firef

Solution 1:

Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').

<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...

Script:

$('.load-me').click(function(e){
    e.preventDefault();
    $('.main-container').hide().load($(this).attr('href'), function() {
        // ...
        $(this).fadeIn(800);
    })
});

JSFiddle

---

If you need the load to wait container hiding animation, you could make it other way.

$('.load-me').click(function(e){
    e.preventDefault();
    // get the url from clicked anchor tagvar url = $(this).attr('href');
    // fade out the container and wait for animation complete
    $('.main-container').fadeOut(200, /* animation complete callback: */function(){
        // container is hidden, load content:
        $(this).load(url, /* load complete callback: */function() {
            // content is loaded, show container up
            $(this).slideDown(200);
        });
    });
});

JSFiddle