「jQueryの基本的なアニメーションメソッドとそれぞれの効果」で紹介した中にあるshow・hide・toggleメソッドを使って要素を表示させたり非表示にしたりするときに、いろいろなアニメーションを適用することができます。
次の例で、適用できるアニメーションを選択して実行を押すと、どのような効果があるか確認することができます。
See the Pen effect by KUBO (@KUBOGEN) on CodePen.
HTML
<select id=”effect”>
<option value=”blind”>Blind</option>
<option value=”bounce”>Bounce</option>
<option value=”clip”>Clip</option>
<option value=”drop”>Drop</option>
<option value=”explode”>Explode</option>
<option value=”fade”>Fade</option>
<option value=”fold”>Fold</option>
<option value=”highlight”>Highlight</option>
<option value=”puff”>Puff</option>
<option value=”pulsate”>Pulsate</option>
<option value=”scale”>Scale</option>
<option value=”shake”>Shake</option>
<option value=”size”>Size</option>
<option value=”slide”>Slide</option>
</select>
<input type=”button” value=”実行” id=”run” />
<div id=”box”></div>
<select id=”effect”>
<option value=”blind”>Blind</option>
<option value=”bounce”>Bounce</option>
<option value=”clip”>Clip</option>
<option value=”drop”>Drop</option>
<option value=”explode”>Explode</option>
<option value=”fade”>Fade</option>
<option value=”fold”>Fold</option>
<option value=”highlight”>Highlight</option>
<option value=”puff”>Puff</option>
<option value=”pulsate”>Pulsate</option>
<option value=”scale”>Scale</option>
<option value=”shake”>Shake</option>
<option value=”size”>Size</option>
<option value=”slide”>Slide</option>
</select>
<input type=”button” value=”実行” id=”run” />
<div id=”box”></div>
CSS
#box {
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
}
#box {
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
}
JavaScript
$(function() {
$(‘#run’).click(function() {
$(‘#box’).toggle($(‘#effect’).val(), 3000);
});
});
$(function() {
$(‘#run’).click(function() {
$(‘#box’).toggle($(‘#effect’).val(), 3000);
});
});
エフェクトと指定できる値
アニメーションのエフェクトと指定できる値は次の通りです。
| エフェクト名・概要 | オプション名・概要 | デフォルト値 | |||
|---|---|---|---|---|---|
| blind | 上下（左右）にブラインドを開け閉めするように | direction | 要素を非表示にするときの方向（up・down・left・right・vertical・horizontal） | up | |
| bounce | バウンドするように | distance | バウンドの最大距離（px） | 20 | |
| times | バウンドの回数 | 5 | |||
| clip | 中央から上下（左右）に開け閉めするように | direction | 開閉の方向（vertical・horizontal） | vertical | |
| drop | 指定方向にスライドしながらフェードイン・フェードアウト | direction | スライドの方向（up・down・left・right） | left | |
| explode | かけらが集まるように表示・爆発するように非表示 | pieces | 分かれるかけらの数 | 9 | |
| fade | フェードイン・フェードアウト | – | – | – | |
| fold | 左右→上下に折りたたむように開く・閉じる | size | 最初に折りたたまれたときの幅（高さ） | 15 | |
| horizFirst | 最初に左右に折りたたむか | false | |||
| highlight | ハイライトのように光った後で元の色に | color | ハイライトの色 | #ffff99 | |
| puff | ふわふわと膨らむように・膨らみが元のサイズに | percent | 膨らむ度合い | 150 | |
| pulsate | 点滅 | times | 点滅の回数 | 5 | |
| scale | 拡大・縮小 | direction | 拡大・縮小の方向（both・vertical・horizontal） | both | |
| origin | 消える・現れる位置（top・middle・bottom・left・center・right） | [“middle”,”center”] | |||
| percent | 拡大する割合 | – | |||
| shake | 左右（上下）に揺れる | direction | 最初に揺れる方向（left・right・up・down） | left | |
| distance | 揺れる幅 | 20 | |||
| times | 揺れる回数 | 3 | |||
| size | 指定のサイズに要素を変更 | to | サイズ変更後のサイズ | – | |
| origin | 基点となる位置（top・middle・bottom・left・center・right） | [“top”,”left”] | |||
| slide | 左から右に（上から下に）スライドするように | direction | スライド方向（left・right・top・bottom） | – | |
| distance | スライドする距離 | 対象の要素のサイズによる | |||
$(対象の要素).show(エフェクト [,オプション] [時間] [コールバック関数])
$(対象の要素).hide(エフェクト [,オプション] [時間] [コールバック関数])
$(対象の要素).toggle(エフェクト [,オプション] [時間] [コールバック関数])
effectメソッドについて
show・hide・toggleメソッドは要素の表示・非表示に使いますが、effectメソッドを使うと、表示・非表示とは切り離してエフェクトを適用させることができます。
ただし、blind・clip・drop・explode・fold・puffは、エフェクトそのものが要素を非表示にするという意味を持っているため、結果的にhideメソッドと同じような動きになってしまいます。
なのでshakeとか、他のエフェクトで試してみてください。要素が非表示にならずに、エフェクトだけ適用されます。
Leave a Comment