如何防止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'); 
    }); 

    }); 
}