質問: $(this).attr('href'); $('.detail_contentsBox').animate({ opacity : 0 }, 'normal', function() { $.pjax({ url: nextUrl, container: 'detail_contentsBox', fragment: '.detail_contentsBox', timeout: 30000 }); }); }); //Pjax実行後 $(document).on('pjax:end', function() { $(".detail_contentsBox").animate({opacity:1}, 500); }); //戻る/進むボタン時に呼び出される(ここでフェードアウトさせたい) $(document).on('pjax:popstate', function(e) { $(".detail_contentsBox").animate({opacity:0}, 500); }); ``` 「pjax:popstate」で切り替え部分をフェードアウトさせてから、切り替え部分を更新。 切り替え部分の更新が終わってから、フェードインさせたいのですが、 フェードアウト途中で、切り替え処理が走ってしまいます。 フェードアウト処理完了まで、通信を待機させるようなことはできるのでしょうか? ご教示いただけたら幸いです。 よろしくお願いいたします。
回答: dotさま 回答ありがとうございます。 defunkt版だと難しいのですね! 色々細かく実行タイミングごとにイベント仕組めそうだったので、 いけるかなと思ったのですが。 falsandtru版Pjaxを試してみましたところ pjax遷移時にフェードイン、フェードアウトを実現できました。 通常の遷移、戻る/進む時の遷移もアニメーションしてくれます。 ver2.42.0 jqueryプラグインとして使用しました。 「pjax:fetch」で実行前、 「pjax:ready」で実行後の処理を記述しています。 callbackとか他にも便利そうな機能があるようですが、 私の環境では実現できず。。 まだまだ勉強せねば、、 ありがとうございました! ``` $.pjax({ area : '.detail_contentsBox', link : '.topSlide_btn', ajax: { timeout: 3000 }, }); //pjax実行前 $(document).on('pjax:fetch', function() { $(".detail_contentsBox").animate({opacity:0}, 500); }); //pjax実行後 $(document).on('pjax:ready', function() { $(".detail_contentsBox").animate({opacity:1}, 500); }); ```