fx.speedsとは
- ここで説明する fx.speeds とは次の語句からなるjQueryのプロパティです。
- fx
- 読み: エフエックス
意味: effects (エフェクツ, エフェクト) の短縮類似発音語。「効果」の意味。 - speed
- 読み: スピード
意味: 速度、速さ
speedsプロパティの概要
このプロパティは、全てのアニメーションに関わる速度キーワードの値を変更することができます。 また、新たな速度キーワードを追加し、値を設定することもできます。
このプロパティに設定できる値はオブジェクト型であり、キーとデュレーション値が対になっている必要があります。 デュレーション値には、ミリ秒単位の数値を指定します。
ただし、本プロパティの設定を反映させるには、実行中のアニメーションがあれば、それを停止する必要があります。
構文
サンプルを見る前に構文を確認しておきます。
jQuery.fx.speeds = {key : duration [, key : duration]...}- key : 既存、または 任意のプロパティ名を指定します。
- duration : アニメーションに費やす時間をミリ秒単位の数値で指定します。
サンプルコードと実行結果
ここでは fx.speeds を使用して、アニメーションに関わるデュレーションキーワードが持つ値を変更します。
デュレーションに指定できるキーワードには slow や fast というのは、元々にありますが、 ここではその値を変更し、更に medium と none というキーワードを追加、設定して使用しています。
サンプルコード: CSS
<style>
#idDiv{
position: relative;
left: 0;
top: 0;
background-color: ##lightgreen;
border: thin solid ##lightgray;
padding: 19px;
height: 80px;
width: 80px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="idDiv"> Element </div>
<button id="idButton"> run animation </button>
<script>...</script>
</body>
- 06: div id="idDiv" (この要素がアニメーションします。)
- 07: button id="idButton" (アニメーションを開始する為のボタンです。)
サンプルコード: script
<script>
$.fx.speeds = {slow:2000, medium:1000, fast:500, none:0};
$("#idButton").click(function(){
$("#idDiv").animate({"left":"150px"}, "slow", "linear");
$("#idDiv").animate({"left":"300px"}, 1000, "linear");
$("#idDiv").animate({"left":"450px"}, "fast", "linear");
$("#idDiv").animate({"left":"300px"}, "medium", "linear");
$("#idDiv").animate({"left":"150px"}, "slow", "linear");
$("#idDiv").animate({"left":"0"}, "none", "linear");
});
</script>
- 02: $.fx.speeds = {slow:2000, medium:1000, fast:500, none:0} ("slow" というキーワードを 2000 ミリ秒に設定しています。"medium" というキーワードを 1000 ミリ秒に設定しています。以後省略します。)
- 03-10: $("#idButton").click(function(){関数の処理}) (idButton の要素がクリックされると 関数の処理 を実行します。)
- 04, 05, 06, 07, 08, 09: $("#idDiv").animate() (各 animate()メソッドの引数にデュレーションのキーワードが設定されています。)
Element
アニメーションをご覧になってお分かりいただけたでしょうか。 要素は設定したデュレーションの値を移動の持続時間としているので、移動速度に変化があったと思います。