Question

Basically, I use the $.get() function to retrieve data from the website. When data is received, it should slide up existing content and slide down new content.

Here is my code:

$.get(url, so, function (data) {
    if (data.length>0)
    {
        $("#center_content_box").slideToggle(2000).empty().html(data).slideToggle(2000);
    }
});

The problem is that if the new content is displayed then the effect happens. I want an effect similar to http://www.elegantthemes.com/preview/BusinessCard/ when links are clicked. The contents slideup fade and slidedown and then fade again.

Answer 1

You can use animation completion handler to set your data to div.

$.get(url, so, function (data) {
            if (data.length>0)
                {
                $("#center_content_box").slideToggle(2000,function(){
                     $("#center_content_box").empty().html(data).slideToggle(2000);
                });
}
});

Please visit Example