Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[jQuery]⑦アニメーション効果

jQuery
  • show() 非表示状態の要素を表示
  • hide() 表示中の要素を非表示にする
  • セレクター :animeted アニメーション処理中の要素を選択
  • toggle() 要素の表示、非表示を交互に切り替え
  • slideDown/slideUp() 表示非表示をスライドで切り替え
  • slideToggle() 表示/非表示をスライドで交互に切り替える
  • fadeIn/fadeOut() 表示状態をフェードで切り替える
  • fadeTo() 透明度をじょじょに変更する
  • animate() 独自のアニメーションを設定

show() 非表示状態の要素を表示

  • セレクタで指定した要素を表示する
  • フェードインアニメーション
  • 透明度を透明▶非透明▶最終的にdisplay:blockへ
  • スピードとコールバック関数を指定できる
  • スピードはミリ秒かslowかfastで指定
  • コールバック関数とは、アニメーションが処理した後続けて関数を呼べる命令

hide() 表示中の要素を非表示にする

  • show()と逆の働きをする
  • display:blockのHTML要素をdisplay:noneに変更する

セレクター :animeted アニメーション処理中の要素を選択

  • :not(:anieted)を記述するとアニメーション処理中でない要素を絞り込める
  • アニメーションしていない時「だけ」show/hideを実行させることができる
  • 設定しないと、何度もアニメーション処理命令を実行されるおそれがある
例題：hide()とshow()
  • ボタン「非表示」クリックで300*300の四角形を非表示
  • ボタン「表示」クリックで300*300の四角形を表示
  • 表示がおわったら背景色を赤にする
<style>
#rect1{
  width: 300px;
  height: 300px;
  background-color:yellow;
  display:none;
}
#rect2{
  width: 300px;
  height: 300px;
  background-color:blue;
}
</style>
<script>
$(function(){
  $("#anim1").click( function(){
    $("#rect1:not(:animated)").show(300);
  });
  $("#anim2").click( function(){
    $("#rect2:not(:animated)").hide(300, function(){
            $("body").css("background-color","red");
     });
  });
});
</script>
</head>
<body>
<p><button id="anim1">表示</button>　<button id="anim2">非表示</button></p>
<div id="rect1"></div>
<div id="rect2"></div>
</body>

toggle() 要素の表示、非表示を交互に切り替え

  • show()hide()と同じく、アニメーションスピード/コールバック関数を指定できる
例題：ボタンをクリックするとトグルで要素を表示/非表示
$(function(){
  $("#anim").click( function(){
    $("#rect1:not(:animated)").toggle(300);
  });
});
</script>
</head>
<body>
<p><button id="anim">表示非表示</button></p>
<div id="rect1"></div>
</body>

slideDown() / slideUp() 表示非表示をスライドで切り替え

  • slideDown()▶非表示の要素の高さを０から本来の高さに近づけながら表示する
  • slideUp()▶表示状態の要素の高さをじょじょに０に近づけて非表示(display:block)する

slideToggle() 表示/非表示をスライドで交互に切り替える

  • toggle()のスライドアニメーション版
例題：dl(定義リスト)の開閉
  • dlのうち、dtをクリックするとdlをスライドで表示する
  • 切り替えはslideToggle
  • dlにカーソルが重なった時わかりやすくマウスカーソルを変更する
<script>
$(function(){
  $("dt").click(function(){
    $("dd:not(:animated)").slideToggle("200");
  });
});
</script>
</head>
<body>
<dl>
<dt>スライドして表示する </dt>
<dd>slideDown()▶非表示の要素の高さを０から本来の高さに近づけながら表示する/slideUp()▶表示状態の要素の高さをじょじょに０に近づけて非表示(display:block)する</dd>
</dl>
</body>

fadeIn() / fadeOut() 表示状態をフェードで切り替える

  • 透明度(CSSのopacityプロパティ)の値をじょじょに変更する
  • フェードアウトするとdisplayプロパティをnoneに設定する
  • スピード、コールバック関数を設定できる
例題：フェードイン・アウト
  • 表示ボタンを押すと画像をフェードイン、非表示ボタンを押すとフェードアウト
$(function(){
  $("#fadein").click(function(){
    $("img:not(:animated)").fadeIn(300);
  });
  $("#fadeout").click(function(){
    $("img:not(:animated)").fadeOut(300);
  });
});
</script>
</head>
<body>
<p><button id="fadein">表示</button>　<button id="fadeout">非表示</button></p>
<p><img src="img/01.jpg" alt=""></p>
</body>

fadeTo() 透明度をじょじょに変更する

  • 透明度(CSSのopacityプロパティ)の値を設定した値までじょじょに変更する
  • .fadeTo(スピード,透明度,コールバック関数);
  • 透明度は0~1の間で設定(小数指定)
  • fadeOutとは違い、opacity値が０でもdisplayプロパティはnoneにならない
  • なので要素の存在するスペースは確保されたままになる
例題：半透明
  • 表示ボタンを押すと画像をフェードイン、非表示ボタンを押すとフェードアウト
  • 半透明ボタンを押すと画像の透明度を50%にする
$(function(){
  $("#fadein").click(function(){
    $("img:not(:animated)").fadeTo(300,1);
  });
  $("#fadeout").click(function(){
    $("img:not(:animated)").fadeTo(200,0);
  });
  $("#fade50").click(function(){
    $("img:not(:animated)").fadeTo(300,0.5);
  });
});
</script>
</head>
<body>
<p><button id="fadein">表示</button>　<button id="fade50">半透明</button>　<button id="fadeout">非表示</button></p>
<p><img src="img/01.jpg" alt=""></p>
</body>

animate() 独自のアニメーションを設定

  • 任意のCSSプロパティの値を変化させアニメーションを作成できる
  • .animate( 値を変更したいCSSプロパティ, スピード, 動き方, コールバック関数);
  • 変更できる値は数値(px, em, %)であらわせるものに限る(colorなどは対応しない)
  • 複数のプロパティを指定するときは、グループセレクターのように , でつなげられる
  • 動き方は「linear」一定速度、「swing」だんだん早く、を設定できる
  • たとえば移動するには、margin値を変化させる
例題：画像のスライド
  • 画像をクリックすると、２枚の画像が左右にスライドして切替わる
  • overflow:hiddenを利用して越えた部分を非表示にする
<style>
#frame{
     width: 600px;
     height: 400px;
     overflow: hidden;
}
p{
     width: 1200px;
     height: 400px;
}
</style>
<script>
$(function(){
  $("#img01").click( function(){
    $("p:not(:animated)").animate({
          "margin-left": "-600px"
          },"slow","swing");
  });
  $("#img02").click( function(){
    $("p:not(:animated)").animate({
          "margin-left": "0"
          },"fast","linear");
  });
});
</script>
</head>
<body>
<div id="frame">
<p><img src="img/01.jpg" alt="" id="img01"><img src="img/02.jpg" alt="" id="img02"></p>
</div>
</body>

f:id:akatonbo_web:20150521025729p:plain