要素を非表示にする前に、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();});

サミーだよ、 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がさらにステートメントの実行を継続して、非同期アニメーションを引き起こします。だから、それは要素をフェードアウトし、その開始後にやっと、あなたは内容を変更し、私はそれはエフェクトチェーンに追加されます想像したフェードを呼び出すために開始します。

フェードアウトアニメーションが完了した後に起動され、あなたがコールバック関数を渡すことができます。だから、あなたがこれを行うことができます：

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

  });
}