CODEWITHSUNDEEP
jquery
Sir Lojik
Sir Lojik

Reputation: 1429

jQuery slideDown() and slideUp() effect issue

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.

Upvotes: 0

Views: 591

Answers (2)

Ahmet Can Güven
Ahmet Can Güven

Reputation: 5462

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

Upvotes: 1

Shai Mishali
Shai Mishali

Reputation: 9382

You can use the animation completion handler to test when the animation is complete

$("#item").slideDown('slow', function(){
                                   $("#item").html("Set content here after effect is done");
                             });

Shai.

Upvotes: 3

Related Questions