jQuery Ajax animation Chain

Question

The Code

$.ajax({
    url: "get_portfolio_experience.php",
    success: function(html) {
        $("#inbox_content").html(html).hide().slideDown('slow');
    }
});

The content doesn't animate if i do not put a hide() before slideDown(). And if i put a hide() it doesn't show in IE. What should i do?

Answer 1

You should add a CSS style display: none; for #inbox_content and use this code:

$.ajax({ 
    url: "get_portfolio_experience.php", 
    success: function(html) {
        $("#inbox_content").html(html).slideToggle('slow'); 
    } 
});

Answer 2

First, let's shorten this down with .load() like this:

$("#inbox_content").load("get_portfolio_experience.php", function(html) {
  $(this).hide().slideDown('slow');
});

Now for the issues, your explanation of IE behaving weird is almost certainly caused by invalid markup. Check the response coming back, are there any unclosed or invalid tags? Check it with the W3C Validator here: http://validator.w3.org/