0

要素のコンテンツを変更したい場合、エフェクトなしで正常に動作し、エフェクトを使用してこの動作を実行します。

  1. コンテンツを新しいものに変更します
  2. 新しいコンテンツに隠蔽効果をもたらします
  3. まだ新しいコンテンツに表示効果を行います

コンテンツを変更する必要があるたびに起動されるコードは次のとおりです。

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/ 。

よろしくお願いします！

4

2 に答える 2

2

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

フェードアウト効果が終了すると、データスイッチオーバーが実行され、フェードインします。

アンドリュー

于 2009-08-09T23:09:07.583 に答える
0

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

  });
}
于 2009-08-09T23:10:42.870 に答える