Question

I would like to chage a div content with ajax, but before hide it and after the change, show it with jQuery animation.

My current code:

$(document).on("click", ".menuItem", function(){
    var contentName = $(this).attr("name");
    $( "#content > div" ).hide(1000, function(){
        $.ajax({ type: "GET",
            url: contentName,
            dataType: 'html',
            success : function(responseText){
                $("#content").html(responseText);
                $("#content").show(1000);
            }
        });
    });
});

But it isn’t working, because when html method invoked, the new content sudden appear.
Is there any way to solve this issue?

Thanks in advance!

Richard

Answer 1

The problem here is that the $("#content") element is always visible. Before ajax call you are hiding a div inside #content -> $("#content > div").

You can hide the $("#content") before adding content.

$("#content").hide().html(responseText).show(1000);

or

    $("#content").hide(1000, function(){
        $.ajax({ type: "GET",
            url: contentName,
            dataType: 'html',
            success : function(responseText){
                $("#content").html(responseText).show(1000);
            }
        });
    });