Question

I have a (simple) problem with jQuery. All I wanna do, is to append a new HTML content into a div using the fadeOut animation. But, I don’t see it (that’s new div has still the display: none property

$.post('/Home/Update', {}, function (res) {
  $('<div id="myContent">' + res + '</div>')
    .hide()
    .appendTo('#mainContainer')
    .fadeOut(1000);
});

<div id='mainContainer' style='float:left; width: 900px; height:400px;  border: 1px solid Red; margin-left: 10px;'>

</div>

Answer 1

You need to use fadeIn instead of fadeOut (you want to show new stuff, now hide it). Try this:

$.post('/Home/Update', {}, function (res) {
  $('<div id="myContent" style="display:none">' + res + '</div>')
    .appendTo('#mainContainer')
    .fadeIn(1000);
});