質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

3858閲覧

Pjaxで戻る/進むの場合にアニメーションさせたい

webeee

総合スコア13

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

2クリップ

投稿2017/05/01 12:00

###前提・実現したいこと
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」で切り替え部分をフェードアウトさせてから、切り替え部分を更新。
切り替え部分の更新が終わってから、フェードインさせたいのですが、
フェードアウト途中で、切り替え処理が走ってしまいます。

フェードアウト処理完了まで、通信を待機させるようなことはできるのでしょうか?

ご教示いただけたら幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2017/05/09 01:03

webeee

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/05/09 11:32 編集

サンプルで作ったのを貼っておきますね defunkt版で出来ると書いてあって内部では falsandtru版で作られているのがあって混乱しました <div id="container"> <a href="index1.php">1</a><br> <a href="index2.php">2</a><br> <a href="index3.php">3</a><br> </div> <script type="text/javascript"> //<!-- $(function(){ //http://chibinowa.net/note/js/pjax-fragment.html ここを参考にしました; $.pjax({ area : '#container', link : $(this).attr("href"), callback : function() { $('#container').animate({ opacity : 1 }, 500); // エフェクトの時間 }, ajax: { timeout: 3000 }, // 読み込みにこれ以上かかる場合は通常遷移に移行 wait : 500 // エフェクト分待ち時間を作る }); //戻る/進むボタン時に呼び出される(ここでフェードアウトさせたい) $(document).on('pjax:fetch', function(e) { $("#container").animate({opacity:0}, 500); }); }); //--> </script>
webeee

2017/05/11 01:20

サンプルありがとうございます! コールバック関数を使って、フェードイン/アウト実現できました! シンプルなアニメーションのみであれば、コールバック使って実装した方が、 スマートそうですね。 ありがとうございました! $.pjax({ area : area, ajax: { timeout: 5000 }, callback : function() {$(".detail_contentsBox").animate({opacity:1}, 500);}, //fedeIn callbacks: { ajax: { beforeSend:function() {$(".detail_contentsBox").animate({opacity:0}, 500);}, //fedeOut } } });
guest

0

ベストアンサー

defunkt版Pjaxだと難しいかもしれません
falsandtru版Pjaxだと
waitが使えるので実装が楽かも

投稿2017/05/02 05:35

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問