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

Question

当我想更改元素的内容时，它可以在没有效果的情况下正常工作，并且会产生以下效果：

2. 将内容更改为新内容
3. 隐藏效果，对新内容
4. 有没有显示效果，还是在新内容上

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

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();});

这是 sammy， http: //github.com/quirkey/sammy/。

预先感谢您的帮助！

Answer 1

fadeOut 和 fadeIn 函数有一个完整的处理程序，您需要使用例如：

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

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

安德鲁

Answer 2

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

fadeOut 允许您传递一个回调函数，该函数在动画完成后触发。所以你可以这样做：

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');
    });

  });
}