使用jQuery替换旧内容和fadeOut / In

Question

我有一个带有div的基于网络的应用程序，通常是左侧导航。通常声明宽度，但可能没有（即只填充父容器）

然后我将按如下方式使用jquery：

$('#thatdiv').load('http://example.com/ajax/url-etc');

它工作正常。但是，我想按照这个顺序做几件事：

1. 淡出旧内容
2. 淡入新内容
3. 同时，将高度从旧的高度过渡到新内容的高度，向下推或折叠。

这是我的第一个jsFiddle： http://jsfiddle.net/sfullman/4zhdov58/

虽然我对ajax和jquery.post方法非常熟悉，但我会很感激最强大的方法的反馈。同样，通常宽度将是固定的，因此过渡将在高度

我将非常感谢任何链接或示例，因为我将此技能添加到我的保留曲目中

Answer 1

您应该使用$.ajax函数，它提供了一些选项来获取您想要的行为：

$.ajax({
  url: "http://example.com/ajax/url-etc",
  beforeSend: function() {
     $('#thatdiv').fadeOut('slow');
  }
  success: function(response) {
     $('#thatdiv').append(response);
  }
}).always(function() {
     $('#thatdiv').fadeIn('slow');      
});

希望它有所帮助。

问候。