現在、webサイトの作成を行っているのですがその中で、同一ページ内リンクの際、クロスフェード表示しながら切り替わるページを作成したいと考えています。 ----------------------------------------------- AREA_1 LINK AREA_2 ----------------------------------------------- 1.[LINK]をクリック。 2.[現在表示されているページ]から[AREA_2がトップで表示された状態のページ]へクロスフェード切替。実際の手順や参考になりそうなURL等、ご存知の方がおられましたらお知恵をお借りしたく、何卒よろしく御願いいたします。

同一ページ内リンクで、クロスフェード切替

解決済

質問者：okwave_ito
質問日時：2012/08/24 12:01
回答数：1件

現在、webサイトの作成を行っているのですがその中で、
同一ページ内リンクの際、クロスフェード表示しながら切り替わるページ
を作成したいと考えています。
-----------------------------------------------
<html>
<head></head>
<body>
<div id='area_a'>
AREA_1
<a href='#area_b'>LINK</a>
</div>
<div id='area_b'>
AREA_2
</div>
</body>
<html>
-----------------------------------------------
1.[LINK]をクリック。
2.[現在表示されているページ]から[AREA_2がトップで表示された状態のページ]へクロスフェード切替。

実際の手順や参考になりそうなURL等、
ご存知の方がおられましたらお知恵をお借りしたく、何卒よろしく御願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2012/08/27 15:52

画像等でフェードイン/アウトしているものは、同じ位置に両方を重ねておいて、フェードイン/アウトさせています。

ご質問の場合、対象がHTMLドキュメントそのものなので、そのままでは無理があるかと思われます。

どうしてもやりたければ、
　1）　フェードアウト → 表示位置移動（非表示状態で） → フェードイン
みたいなことをやるか、あるいは

　2）　切替え時に一時的にdivなどを生成し、そのなかへbody内をコピー
　　　　同じ位置にこのdivをabsoluteなどで重ねて表示させ、下のHTMLは表示位置を移動
　　　　フェードイン/アウトで切り替え
　　　　終了時に、生成したdivを削除
みたいにするかでしょうか。

この場合、CSSがdiv内でも同じレイアウトになるように指定してあることや、要素にidが振られていると一時的に一意でなくなり文法違反になること。
さらには、divを表示中にリンク要素をクリックすると、再度スクリプトが走る可能性があるので、これを防止しておくこと。
などが必要かも知れません。
（試していませんが、divの代わりにiframeが使えればそれでもいいかも ← ダメかも知れません）

参考サイトは「javascript」、「javascript fadeout」などをキーに検索してください。

- 0
- 件

通報する

この回答へのお礼

返信が遅くなってしまい、申し訳有りません。

やはり、フェードアウト/インを同時にやらせるのは難しいのですね。
とりあえず、下記の通り、1でお教えいただいた手順にて対応したいと思います。
-------------------------------------------
// リンク押下で、以下の関数をコール(JQuery使用)。
function fadelink(id){
$('#wrapper').animate({"opacity":0},500,function(){
ocation.href = id;
$('#wrapper').animate({"opacity":1},500);
});
}
-------------------------------------------

ご丁寧な回答をいただき大変参考になりました。
ありがとうございました。