jquery load animations

Question

I'm messing around with jQuery's load and fadein and fadeout animations but i can't get a handle on how to work them together.

i have a function that replaces whats in my #ajaxdiv with a calendar every time i click the next month. It doesn't have any animation but it works great.

function ajaxCalendar(X,Y,Z){
var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1";
$("#ajaxdiv").load(changemonthlink);
return false;       
};

Now what i'd like to do (if it's fairly easy to achieve) is to fade/slide the content of the div left or right and then slide/load the new content left or right. Any help would be amazing.

I've done this but it doesn't work. The browser navigates to the link...

function ajaxCalendar(X,Y,Z){
            $('#ajaxdiv').hide('slow',loadContent());  
            return false;       
};

function loadContent() {  
    var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1";
    $('#ajaxdiv').load(changemonthlink,'',showNewContent());
};


function showNewContent() {  
       $('#ajaxdiv').show('normal'); 
};

i've rearranged it into this. and the initial hide animation is working but thats it. The div doesn't ever show back up.

function ajaxCalendar(X,Y,Z){
            $('#ajaxdiv').hide('slow',loadContent());  

            function loadContent() {  
                var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1";
                $('#ajaxdiv').load(changemonthlink,'',showNewContent());
            }

            function showNewContent() {  
                   $('#ajaxdiv').show('normal'); 
            }

            return false;   

};

latest function works, but the timing is off. The the loading of the calendar is happening before the fadeOut() is complete. i tried putting a delay(300) right before the load() function but that just delayed the initial fadeout.

function ajaxCalendar(X,Y,Z){
            $('#ajaxdiv').fadeOut('300',loadContent());  

            function loadContent() {  
                var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1";
                $('#ajaxdiv').load(changemonthlink,'',function(){
                   $('#ajaxdiv').fadeIn('300'); 
                });
            }

            return false;   

};

Marc Uberstein Marc Uberstein · Accepted Answer · 2011-07-04T14:52:41

Try switching to fadeIn() and fadeOut() instead of show() and hide()

AND make sure you are parsing your function parameters.

AND use $.get instead of .load... see my following code

function ajaxCalendar(X, Y, Z) {
    var changemonthlink = "/css/normalize.css"; //test url only {css file on same domain}

    $.get(changemonthlink, function(data) {
        $('#ajaxdiv').fadeOut('normal',function(){$('#ajaxdiv').html(data);});
        $('#ajaxdiv').fadeIn('normal');
    }).error(function(a, b, c) {
        alert(b + ' : ' + c);
    });
}

See my example : http://jsfiddle.net/8E7vk/2/

jquery load animations

2 Answers