jQuery 「エフェクト」カスタムアニメーション
animate()は、数値で指定可能なCSSプロパティを使い、独自の視覚効果を作成できる汎用的なメソッドです。まず、第1引数には変化させるCSSプロパティの名前と最終的に到達する値を、連想配列の形で指定します。ここで使用できるのは、あくまでも「数値」で指定できるプロパティだけやtext-decorationなどは指定できません。つまり、widthやheight,leftやrightなどは使用可能ですが、colorやtext-decorationなどは指定できません。
また、「font-size」などのように名前に-(ハイフン)が含まれるものはハイフンを取り除いてハイフン直後の文字を大文字に変えたもの、いわゆるキャメルケースで指定しなくてはなりません。「font-size」の場合は「fontSize」、「margin-left」の場合は「marginLeft」となります。ただし、emや%などが使えるプロパティであれば、これらの単位を指定各プロパティの値の単位は、基本的にピクセル数として認識されます。ただし、emや％などが使えるプロパティであれば、これらの単位を指定することも可能です。
値には、最終的な値そのもの以外に、現在の値からの差分を指定することもできます。その場合は、差分値の前に「+」「-=」を指定します。さらに、widthやheightなどのプロパティの値には、数値以外にshow,hide,toggleの3つのキーワードが指定可能です。
第2引数は、フェード効果やスライド効果と同様に、アニメーション効果にかける時間です。「fast(速く)」「slow(遅く)」といった文字列での指定の他ミリ秒単位の数値でも指定できます。なお、fastは200ミリ秒、slowは600ミリ秒を指定したのと同じになります。.fadeIn()または.fadeOut()では、この値は省略可能で、省略した場合は400ミリ秒が設定されたものとして実行されます。
第3引数は、アニメーション時間内で各プロパティ値を変化させる際の変化量の増減の仕方を指定します。デフォルトで指定可能なのは「linear」と「swing」だけで、前者は時間に沿って段階的に、後者は波のようにうねりのある変化の仕方をします。また、この引数に独自の関数を渡すことで、アニメーションの仕方もカスタマイズできます。
最後の引数は、アニメーションが完了したときに実行されるコールバック関数です。もうひとつの書式は、第1引数のCSSプロパティは同じですが、第2引数として各種のパラメータを連想配列で渡します。パラメータには、次のキーが指定可能です。
animate()のパラメータ
| パラメータ | 説明 |
|---|---|
| duration | アニメーション効果にかける時間 |
| easing | 変化量（linear,swingまたは独自定義の関数名） |
| queue | アニメーション効果をfxキューに登録するかどうかをtrue/falseで設定 |
| specialEasing | CSSプロパティ個別に変化量を連想配列として指定 |
| step | アニメーションのステップごとに実行される関数 |
| progress | 各アニメーションのステップ後に、アニメーションプロパティの数に関係なく、アニメーション要素ごとに1度だけ実行されるコールバック関数 |
| complete | アニメーション終了時に実行されるコールバック関数 |
| start | アニメーション開始時に実行されるコールバック関数 |
| done | アニメーション終了時に実行されるコールバック関数 |
| fail | アニメーションの完了が失敗したときに実行されるコールバック関数 |
| always | アニメーション完了の成功・失敗に限らず、完了または停止したときに実行されるコールバック関数 |
最後のパラメータの後に「,（カンマ）」を付けないようにします。
書式
$("対象要素").animete( CSSプロパティ配列 , [効果時間],[変化量],[コールバック] );
$("対象要素").animete( CSSプロパティ配列 , オプション配列 );$("#img").animate(
{
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
},1500
);
$("#right").on('click', function(){
$(".block").animate({"left":"+=50px"}, "slow");
})サンプル
１、サイズと透明度の変更
clickボタンをクリックすると緑の枠（border）とimgタグに指定した画像のサイズを変更し、opacityで画像の透明度を変更します。第2引数にはアニメーションにかかる時間を1500ミリ秒と設定しています。border-widthやmargin-leftはキャメルケース（ハイフンが含まれるプロパティ名からハイフンを取り除いてハイフン直後の文字を大文字に変えたもの）でないと指定できないため、「borderWidth」「marginLeft」と記述します。
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
img{
width: 150px;
margin-left: 50px;
border: 2px solid green;
}
</style>
</head>
<body>
<button id="btn">click</button>
<img src="./images/112083_s.jpg">
<script>
$(document).ready(function(){
$("#btn").on('click',function(){
$("img").animate({
width: "300px",
opacity: 0.5,
borderWidth: "10px",
marginLeft: "20px"
},1500);
});
});
</script>
</body>
</html>
２、ボタンで画像を左右へ動かす
.animate()メソッドで、imgタグで指定した画像のleftプロパティを現在位置からの相対で指定します。「進む」ボタンをクリックすると現在位置の左（left）からプラス50px移動、「戻る」ボタンをクリックすると現在位置の左（left）からマイナス50px移動します。要素が配置されている位置を起点としてアニメーションが行われるため、CSSにおけるpositionの設定に注意します。
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
body{
background-color: #000000;
}
img{
position: absolute;
width: 150px;
margin: 5px;
}
</style>
</head>
<body>
<button id="move">進む</button>
<button id="return">戻る</button>
<img src="./images/4650840_s.jpg">
<script>
$(document).ready(function(){
$("#move").on('click',function(){
$("img").animate({left: "+=50px"},"slow");
});
$("#return").on('click',function(){
$("img").animate({left: "-=50px"},"slow");
});
});
</script>
</body>
</html>
