jQuery hide element, load Ajax in it, and then show element

I am trying to hide an element, then replace its contents while it's hidden with an开发者_如何学编程 ajax load(), and as a callback, I would like to show that element again. Unfortunately, after the request completes, the callback is kind of ignored: the element is not shown again.

Here's my code, hope I was clear in my problem:

//element is visible
$("#play").hide();//element becomes hidden
$("#play").load("page", function(data){
    $("#play").show();//element should be visible again, but it isn't
});

The url, "page" may also contain an element with the ID, "play". Try to store the $("#play") in a variable.

//element is visible
var $play = $("#play");
$play.hide();//element becomes hidden
$play.load("page", function(data){
    $play.show();//element should be visible again, but it isn't
});

Your code is right. An error happened while making your Ajax call.

• Are you sure your URL is correct?
• load requests using the GET method, does your server script allows GET?
• Are you sure there wasn't any error server-side? If this happened, your callback wouldn't execute.

Putting an 'alert' in your inside function will let you show if the request was successful:

$("#play").load("page", function(data){
    alert('success');
    $("#play").show();//element should be visible again, but it isn't
});

I hope this helps.