落書きノート

ふと自分が気になった事を書いてます

jQueryを使って、モバイル対応のページのフェード処理をさせる。

JavaScriptライブラリのjQueryを使って、モバイルにも対応したフェードイン・フェードアウト処理をさせる。

今回は、sectionタグの領域をフェード処理させる。jQuery独特のコードは理解しづらいが、慣れると問題ない。下記はそのソースコード

var startup = false;
var pre_page = 0;
var fadeSpeed = 2000;
 
$(function(){
 
    if(!startup){
        $("section#search").css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
    }
 
    $("li",".navbar-nav",".nav").click(function(){
            if(!startup){
                $("section#search").animate({opacity:'toggle'},fadeSpeed);
                startup = true;
            }else{
                $("section" + $(pre_page).find("a[href]").attr("href")).animate({opacity:'toggle'},fadeSpeed);
            }
            $("li",".navbar-nav",".nav").removeClass('active');
            $(this).addClass('active');
            $("section" + $(this).find("a[href]").attr("href")).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
            pre_page = this;
    });
 
});

Bootstrapのテンプレートを参考にして、自分で組んでみた。

ページにアクセスした際にフェード処理をさせるには、少し工夫が必要だった。startup変数を定義し、フラグとして使用することで、その問題を解消した。もしかしたら、最初は処理をさせない方がスムーズで自然であるかもしれない。これについては後で考えて見る。

section#searchと記述しているが、この記述の方が分かりやすくて、このような記述方法にしている。意味としては、sectionの属性であるsearchの領域をフェード処理させている。

cssメソッドでdisplay:blockとopacity:0を指定し、animateメソッドのopacity:1でアニメーション処理をさせている。最初はdisplay:noneで領域を隠しているため、blockで表示させる必要がある。後はopacityを使い、不透明度を徐々に変化させ、アニメーション処理をさせているように見せかける。fadeSpeedは、名前の通りスピードの度合いを表している。fadeIn、fadeOutメソッドでも同じフェード処理が実現できるが、どういうわけかこれはモバイル対応ではないようだ。

pre_page.find(“a[href]”).attr(“href”)は、最近のバージョンのjQueryでは、findメソッドを使わないとアンカータグのhrefを発見できない。発見したものをattrでhrefのアドレスを取得している。

opacity:toggleは、不透明度を0か1に切り替える役割をしている。opacity:1からopacity:0に切り替えても、どういうわけか、領域がフェードアウトされなかったため、toggleを使うようにした。

removeClassやaddClassでは、クラスで指定出来るリンクのアクティブを設定している。アクティブであれば、リンクの表示を濃くすることが出来る。removeClassでは動的にactiveを削除、addClassでは動的にactiveを付加している。オリジナルのHTMLファイルに記述しているactiveを書き換えるというわけではない。実行中の時に限り、有効なコードだ。だから、複数の人が見ても、同じ結果のウェブサイトが閲覧出来る。

pre_page = thisでは、このクリックした時の一連の操作を保存し、次のクリックイベントに利用する。そうすることで、うまく表示させるという寸法だ。

分かりづらいかもしれないが、jQueryの文法やメソッドの機能とにらめっこしてソースを追いかければ理解できるはず。ウェブ検索しながら作っていくときっとできるようになるだろう。GitHubなりテンプレートなり、完成しているソースコードを参考にすれば、出来ることも増えるはずだ。

*追記 領域を重ねて隠しておくには、display:none、position:absolute、z-indexなどを指定しておく必要がある。position:relativeではうまくいかない。