jQuery slideDown() and slideUp() effect issue

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.

score 3 · Answer 1 · answered Dec 11 '11 at 10:14

3

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.

answered Dec 11 '11 at 10:14

Shai Mishali

9,224
4
56
83

ive done this and the slide effect seems to work.im confused on how to get the fade effect as shown in that link. $("#center_content_box").slideUp(2000,function () { $("#center_content_box").empty().html(data).slideDown(2000)}); – Sir Lojik Dec 11 '11 at 10:26
1

Check this answer : http://stackoverflow.com/questions/734554/jquery-fadeout-then-slideup – Shai Mishali Dec 11 '11 at 10:31

score 1 · Accepted Answer · answered Dec 11 '11 at 10:29

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

jQuery slideDown() and slideUp() effect issue

2 Answers2