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

Question

当我想改变元素的内容，它工作正常无需影响，并执行此行为与效果：

改变内容到新的

确实隐藏作用，对新的内容

确实放映效果，还会对新的内容

这里是每次推出的代码，我需要改变的内容：

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

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

非常感谢您的帮助！

Answer 1

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

$.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

淡入淡出和异步引起的动画，所以使用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'); 
    }); 

    }); 
}