Javascript 如何防止jQuery在隐藏元素之前加载修改过的内容？

当我想要更改元素的内容时，它可以正常工作而不产生任何效果，并且这种行为会产生以下效果：

将内容更改为新内容

隐藏效果是否会影响新内容

是否显示效果，仍在新内容上

以下是每次我需要更改内容时启动的代码：

function changePage(slug) {
  var content = $('#content');
  var title   = $('#name');
  $.getJSON('http://'+location.host+'/'+slug+'.json', function(data) {
    $('#main').fadeOut('slow');
    title.html(data.name);
    content.html(data.content);
    $('#main').fadeIn('slow');
  });
}

以下是运行此函数的代码：

var app = new Sammy.Application(function() {with(this){
  get('#/', function() { with(this) {
    changePage('_home');
  }});
  get('#/:page', function() { with(this) {
    changePage(params['page']);
  }});
}});
$(function(){app.run();});

我是萨米

---

提前感谢您的帮助

淡出和淡出功能有一个完整的处理程序，您需要使用，例如：

$.getJSON('http://'+location.host+'/'+slug+'.json', function(data) {
    $('#main').fadeOut('slow',function(){
    title.html(data.name);
    content.html(data.content);
    $('#main').fadeIn('slow');
    });
  });

现在，一旦淡出效果完成，它将执行数据切换和淡入

---

Andrew

fadeIn和fadeOut会导致异步动画，因此Javascript会在这些效果发生时继续执行进一步的语句。所以，它开始淡出元素，刚开始之后，你就改变了内容，然后调用淡入，我想它会被添加到效果链中

淡出允许您传递回调函数，该函数在动画完成后激发。所以你可以这样做：

function changePage(slug) {
  var content = $('#content');
  var title   = $('#name');
  $.getJSON('http://'+location.host+'/'+slug+'.json', function(data) {
    $('#main').fadeOut('slow', function() {
        title.html(data.name);
        content.html(data.content);
        $('#main').fadeIn('slow');
    });

  });
}