###前提・実現したいこと
defunkt版Pjaxプラグインを使用して、
非同期通信でページ遷移するWEBサイトを作成しています。
ページ遷移の際にフェードイン、フェードアウト等の
アニメーションをさせたいのですが、
通常のクリックでのページ遷移の場合にアニメーションさせることは実現できたのですが、
戻る/進むボタンの際にアニメーションさせることができません。
###該当のソースコード
//クリック時 $(document).on('click', '.topSlide_btn', function(e) { e.preventDefault(); nextUrl = $(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」で切り替え部分をフェードアウトさせてから、切り替え部分を更新。
切り替え部分の更新が終わってから、フェードインさせたいのですが、
フェードアウト途中で、切り替え処理が走ってしまいます。
フェードアウト処理完了まで、通信を待機させるようなことはできるのでしょうか?
ご教示いただけたら幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/05/09 11:32 編集
2017/05/11 01:20