CODEWITHSUNDEEP
javascriptjqueryhtml
user1333856
user1333856

Reputation: 47

jQuery hide, change content, show

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

Upvotes: 1

Views: 955

Answers (3)

Corneliu
Corneliu

Reputation: 2942

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);
            }
        });
    });

Upvotes: 3

nrsharma
nrsharma

Reputation: 2562

Try this

$(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").hide().html(responseText).show(1000);
            }
        });
    });
});

Upvotes: 3

Ahmed Assaf
Ahmed Assaf

Reputation: 601

You can try to hide content first :

$(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").hide();
                $("#content").html(responseText);
                $("#content").show(1000);
            }
        });
    });
});

Upvotes: 0

Related Questions